扩展和web页面之间建立长连接 只要从一端建立就可以了,既可以从web端主动建立连接也可以从扩展端主动建立连接,从两端主动建立连接区别如下:
1、从web页面端主动建立连接,就是在content_scripts文件主动建立长连接,
var port = chrome.runtime.connect({name: "haa"});//通道名称
port.postMessage({jia: "aaaa"});//发送消息
port.onMessage.addListener(function(msg) { //监听消息
});
2、从扩展端主动建立连接
chrome.tabs.query(
{active: true, currentWindow: true},
function(tabs) {
var port = chrome.tabs.connect(//建立通道
tabs[0].id,
{name: "haa"}//通道名称
);
});
3、在任意一端监听消息都是一样的
chrome.runtime.onConnect.addListener(function(port) {
console.assert(port.name == "haa");
port.onMessage.addListener(function(msg) {
});
});
本文例子以从扩展端主动建立连接。
文档目录
1、 manifest.json//扩展入口文件
2、 popup.html//扩展页面
3、 popup.js//扩展页面的js文件,在popup.html中引入
4、 index.html//测试页面,这个页面充当正常的web网页,大家可以理解为用它和扩展页面popup.html通信
5、 contentScripts.js//content_scripts文件,这个文件可以控制index.html文件中的元素,index.html与popup.html的通信,其实就是contentScripts.js与popup.js的通信。
6、 jquery.js
文件内容
manifest.json:
{
"manifest_version": 2,
"name": "扩展内部通信Demo",
"version": "1.0",
"description": "扩展内部通信Demo",
"browser_action": {
"default_popup":