Chrome插件消息传递实例

程序员文章站 2022-07-14 20:40:28

...

首先吐槽“360极速浏览器应用开发平台”的开发文档，在消息传递(http://open.chrome.360.cn/extension_dev/messaging.html)一节中，翻译极其低劣：

Sending a request from the extension to a content script looks very similar, except that you need to specify which tab to send it to. This example demonstrates sending a message to the content script in the selected tab.

传递一个请求到扩展很容易，你需要指定哪个标签发起这个请求。下面这个例子展示了如何指定标签发起一个请求。

similar翻译成容易，发送到tab翻译成标签发起。

代码更新也不及时，chrome.tabs.getSelected和chrome.extension.sendRequest这两个函数在新版Chrome已经废弃(参考资料[1])。

学习过程中偷懒不看英文，结果反而被绕个大圈子。

1、开发文档

Chrome的消息传递，可以在Web（通过content script）和扩展之间进行，任意一方都可发送或接收消息。

Web（通过content script）发送消息如下：




chrome.runtime.sendMessage({greeting: “hello”}, function(response) {



  console.log(response.farewell);



});

通过chrome.runtime.sendMessage函数发送消息，其中{greeting: “hello”}是消息对象（大括号的用法见参考资料[2]）；function(response) {…}是回调函数，处理接收方发回的消息。
插件发送消息需要确定接收的Tab，如下：




chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {



  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {



    console.log(response.farewell);



  });



});

以上代码指定当前tab为消息的接收者。
接受端需要通过runtime.onMessage事件处理消息：




chrome.runtime.onMessage.addListener(



  function(request, sender, sendResponse) {



    console.log(sender.tab ?



                "from a content script:" + sender.tab.url :



                "from the extension");



    if (request.greeting == "hello")



      sendResponse({farewell: "goodbye"});



  });

事件处理通过function(request, sender, sendResponse){…}完成，以上代码处理消息时在控制台记录发送者的消息，回复“goodbye”消息。

2、完整示例
示例完成content script和插件的消息传递，具体包括：
1、content script发送消息，backgroud接收消息；
2、popup发送消息，content script接收消息。

manifest.json




{



 "manifest_version": 2,







   "name": "Say Hello",



 "description": "This extension say hello to you.",



   "version": "1.0",



    "permissions": ["tabs", "<all_urls>"],



    "browser_action": {



      "default_icon": "icon.png",



     "default_popup": "popup.html"



   },



  "background": {



     "page": "background.html"



   },



  "content_scripts": [{



       "matches": ["<all_urls>"],



       "js": ["contentscript.js"]



  }]



}

contentscript.js




chrome.runtime.sendMessage({greeting: "hello"}, function(response) {



  console.log(response.farewell);



});







chrome.runtime.onMessage.addListener(



  function(request, sender, sendResponse) {



    console.log(sender.tab ?



                "from a content script:" + sender.tab.url :



                "from the extension");



    if (request.greeting == "hello"){



      sendResponse({farewell: "I'm contentscript,goodbye!"});



    }



  });

background.html




<!doctype html>



<html>



  <head>




        <title>




           Getting Started Extension's Popup



        </title>




      <script src="background.js">




       </script>




 </head>




  <body>




       <p>




          Hello!



      </p>




     <div id="r">




     </div>




   </body>








</html>

background.js




chrome.runtime.onMessage.addListener(



  function(request, sender, sendResponse) {



    console.log(sender.tab ?



                "from a content script:" + sender.tab.url :



                "from the extension");



    if (request.greeting == "hello")



      sendResponse({farewell: "I'm backgroud,goodbye!"});



  });

popup.html




<!doctype html>



<html>



  <head>




        <title>




           Getting Started Extension's Popup



        </title>




      <script type="text/javascript" src="jquery.js">




        </script>




     <script src="popup.js">




       </script>




    </head>




  <body>




       <p>




          Hello!



      </p>




     <div id="r">




     </div>




   </body>








</html>

popup.js




chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {



  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {



    console.log(response.farewell);



  });



});

参考资料
[1]Content脚本与扩展的其他页面脚本的消息传递 http://blog.csdn.net/greatpresident/article/details/9052801
[2]Javascript中大括号“{}”的多义性http://www.cnblogs.com/snandy/archive/2011/02/28/1966894.html

相关标签： Chrome插件消息传递

上一篇： iOS编程基础-OC（三）-对象和消息传递

下一篇：如何在Data Lake Analytics中使用临时表

Chrome插件消息传递实例

Chrome插件消息传递实例

Chrome插件开发实例 – 时间通知（notifications）