您的位置：首页 > 其它

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

2017-03-22 11:09 507 查看

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

},

"content_scripts": [

   {

     "matches": ["http://localhost:63342/*"],//由于index.html是在本地运行的，这里限制了url

     "js": ["js/jquery.js",
"js/contentScripts.js"]

   }

]

}
popup.html:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<input id="input" type="text">
<button id="popup">popup</button>
<script src="js/jquery.js"></script>
<script src="js/popup.js"></script>// chrome不允许扩展中的HTML页面内直接内嵌js脚本，所以必须要将所有的脚本都作为外部src来引入
</body>
</html>

popup.js:

//这里从扩展页面主动建立长连接，也可以从content_scripts文件主动建立长连接

chrome.tabs.query(
   {active: true, currentWindow: true},
   function (tabs) {
       var port = chrome.tabs.connect(//建立通道
           tabs[0].id,
           {name: "ma"}//通道名称
       );
       $("#popup").click(function () {//给web页面的按钮绑定点击事件，通过点击事件来控制发送消息
           port.postMessage({jia: "aaaaaaa"});//向通道中发送消息
       });
       port.onMessage.addListener(function (msg) {//这里同时利用通道建立监听消息，可以监听对方返回的消息
           if(msg.jia== "yuuuuu"){//如果对方(popup.js)返回的消息是{jia: "yuuuuu"}则将扩展里面的input框的值设置为"yuuuuuuu"
               $('#input').val("yuuuuuuu");
           };
       });
   });

index.html:

//index.html是充当web页面，所以这里内容很简单，如果contentScripts.js文件收到了popup.js页面的消息，那么他将改变web页面字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<h1 id="h1">jiaaaaaaaaaaa</h1>
</body>
</html>

contentScripts.js:

chrome.runtime.onConnect.addListener(function (port) {//建立监听

   if(port.name == "ma"){//判断通道名称

       port.onMessage.addListener(function (msg) {//监听消息
           if(msg.jia== " aaaaaaa "){//如果扩展发送的消息为{jia: "aaaaaaa"}那么改变字体颜色
               var el = document.getElementById("h1");
               if (el.style.color == 'red') {
                   el.style.color = 'blue';
               }
               else {
                   el.style.color = 'red';
               }
               port.postMessage({jia: "yuuuuu"});//向扩展同返回消息，
           };
       });
   }

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： chrome 扩展通信 web

相关文章推荐

新的分享

章节导航