chrome扩展开发示例之扩展页面与content_scripts建立长连接通信

扩展和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":