chrome扩展实现跨域通信示例

  chrome扩展实现2个不同域名跨域通信示例,以下代码通过向百度搜索页面中插入iframe加载本网站页面,然后实现相互发送信息(当然可以在对应页面实现dom的操作,示例仅输出相互发送的信息),效果如下

chrome扩展实现跨域通信示例

chrome扩展开启开发者模式后可以直接加载扩展程序

chrome扩展实现跨域通信示例

 

chrome扩展实现跨域通信示例

manifest.json

 {
      "name": "测试",
      "manifest_version": 2,
      "version": "1.0",
      "author":"showbo,http://www.w3dev.cn",
      "description": "测试",
      "content_scripts": [{"matches": ["*://*/*"],"js": ["baidu.js"]}],
      "permissions": ["*://*/*","tabs"]
    }

baidu.js

 

if(location.hostname=='www.baidu.com')//在百度上插入通信的测试 iframe
window.addEventListener('load', function () {
    var div = this.document.createElement('div')
    
    var ifr = document.createElement('iframe');
    ifr.src = 'https://www.w3dev.cn/postmessage.html';
    div.appendChild(ifr);
    var btn = document.createElement('input');
    btn.type = 'button';
    btn.value = '发信息给w3dev.cn'
    div.appendChild(btn);
    btn.onclick = function () {
        ifr.contentWindow.postMessage("www.baidu.com-->www.w3dev.cn:" + new Date().toLocaleString(),
            "https://www.w3dev.cn");
    }
    document.body.insertAdjacentElement('afterBegin', div);
    window.addEventListener('message', function (e) {
        //需要的dom操作
        alert(`来自${e.origin}的信息
${JSON.stringify(e.data)}
`);
        document.getElementById('kw').value=e.data
    }, false);
})

本网站测试页面postmessage.html源代码

 

<input type="button" value="向百度发送信息" onclick="setKeyword()"/>
<script>
    var fromBD = document.getElementById('fromBD');
    function setKeyword() {
        parent.postMessage("www.w3dev.cn-->www.baidu.com:" + new Date().toLocaleString(),
            "https://www.baidu.com");
    }
    window.addEventListener('message', function (e) {
        alert(`来自${e.origin}的信息
${JSON.stringify(e.data)}
`)
    }, false);
</script>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:chrome扩展实现跨域通信示例

评论(0)Web开发网
阅读(53)喜欢(0)JavaScript/Ajax开发技巧