Chrome插件消息传递实例 - 小众知识

Chrome插件消息传递实例

2013年01月27日 14:18:05 苏内容
  标签: Chrome/插件/消息
阅读:69

首先吐槽“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)发送消息如下:

  1. chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  2. console.log(response.farewell);
  3. });

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

  1. chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  2. chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
  3. console.log(response.farewell);
  4. });
  5. });

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

  1. chrome.runtime.onMessage.addListener(
  2. function(request, sender, sendResponse) {
  3. console.log(sender.tab ?
  4. "from a content script:" + sender.tab.url :
  5. "from the extension");
  6. if (request.greeting == "hello")
  7. sendResponse({farewell: "goodbye"});
  8. });


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

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

manifest.json

  1. {
  2. "manifest_version": 2,
  3. "name": "Say Hello",
  4. "description": "This extension say hello to you.",
  5. "version": "1.0",
  6. "permissions": ["tabs", "<all_urls>"],
  7. "browser_action": {
  8. "default_icon": "icon.png",
  9. "default_popup": "popup.html"
  10. },
  11. "background": {
  12. "page": "background.html"
  13. },
  14. "content_scripts": [{
  15. "matches": ["<all_urls>"],
  16. "js": ["contentscript.js"]
  17. }]
  18. }


contentscript.js

  1. chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  2. console.log(response.farewell);
  3. });
  4. chrome.runtime.onMessage.addListener(
  5. function(request, sender, sendResponse) {
  6. console.log(sender.tab ?
  7. "from a content script:" + sender.tab.url :
  8. "from the extension");
  9. if (request.greeting == "hello"){
  10. sendResponse({farewell: "I'm contentscript,goodbye!"});
  11. }
  12. });

background.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>
  5. Getting Started Extension's Popup
  6. </title>
  7. <script src="background.js">
  8. </script>
  9. </head>
  10. <body>
  11. <p>
  12. Hello!
  13. </p>
  14. <div id="r">
  15. </div>
  16. </body>
  17. </html>

background.js

  1. chrome.runtime.onMessage.addListener(
  2. function(request, sender, sendResponse) {
  3. console.log(sender.tab ?
  4. "from a content script:" + sender.tab.url :
  5. "from the extension");
  6. if (request.greeting == "hello")
  7. sendResponse({farewell: "I'm backgroud,goodbye!"});
  8. });


popup.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>
  5. Getting Started Extension's Popup
  6. </title>
  7. <script type="text/javascript" src="jquery.js">
  8. </script>
  9. <script src="popup.js">
  10. </script>
  11. </head>
  12. <body>
  13. <p>
  14. Hello!
  15. </p>
  16. <div id="r">
  17. </div>
  18. </body>
  19. </html>

popup.js

  1. chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  2. chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
  3. console.log(response.farewell);
  4. });
  5. });


其他

代码下载:点击打开链接

注释稍后补上

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


扩展阅读