首先吐槽“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. 

  2. 

    

    

    

      console.log(response.farewell);
    

    3. 

  3. 

    

    

    

    });

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

插件发送消息需要确定接收的Tab，如下：



  1. 

    

    

    

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

    2. 

  2. 

    

    

    

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

    3. 

  3. 

    

    

    

        console.log(response.farewell);
    

    4. 

  4. 

    

    

    

      });
    

    5. 

  5. 

    

    

    

    });

以上代码指定当前tab为消息的接收者。

接受端需要通过runtime.onMessage事件处理消息： 



  1. 

    

    

    

    chrome.runtime.onMessage.addListener(
    

    2. 

  2. 

    

    

    

      function(request, sender, sendResponse) {
    

    3. 

  3. 

    

    

    

        console.log(sender.tab ?
    

    4. 

  4. 

    

    

    

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

    5. 

  5. 

    

    

    

                    "from the extension");
    

    6. 

  6. 

    

    

    

        if (request.greeting == "hello")
    

    7. 

  7. 

    

    

    

          sendResponse({farewell: "goodbye"});
    

    8. 

  8. 

    

    

    

      });

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

2、完整示例
示例完成content script和插件的消息传递，具体包括：

1、content script发送消息，backgroud接收消息；

2、popup发送消息，content script接收消息。

manifest.json



  1. 

    

    

    

    {
    

    2. 

  2. 

    

    

    

     "manifest_version": 2,
    

    3. 

  3. 

    

    

    

     
    

    4. 

  4. 

    

    

    

       "name": "Say Hello",
    

    5. 

  5. 

    

    

    

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

    6. 

  6. 

    

    

    

       "version": "1.0",
    

    7. 

  7. 

    

    

    

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

    8. 

  8. 

    

    

    

        "browser_action": {
    

    9. 

  9. 

    

    

    

          "default_icon": "icon.png",
    

    10. 

  10. 

    

    

    

         "default_popup": "popup.html"
    

    11. 

  11. 

    

    

    

       },
    

    12. 

  12. 

    

    

    

      "background": {
    

    13. 

  13. 

    

    

    

         "page": "background.html"
    

    14. 

  14. 

    

    

    

       },
    

    15. 

  15. 

    

    

    

      "content_scripts": [{
    

    16. 

  16. 

    

    

    

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

    17. 

  17. 

    

    

    

           "js": ["contentscript.js"]
    

    18. 

  18. 

    

    

    

      }]
    

    19. 

  19. 

    

    

    

    }

contentscript.js 



  1. 

    

    

    

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

    2. 

  2. 

    

    

    

      console.log(response.farewell);
    

    3. 

  3. 

    

    

    

    });
    

    4. 

  4. 

    

    

    

     
    

    5. 

  5. 

    

    

    

    chrome.runtime.onMessage.addListener(
    

    6. 

  6. 

    

    

    

      function(request, sender, sendResponse) {
    

    7. 

  7. 

    

    

    

        console.log(sender.tab ?
    

    8. 

  8. 

    

    

    

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

    9. 

  9. 

    

    

    

                    "from the extension");
    

    10. 

  10. 

    

    

    

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

    11. 

  11. 

    

    

    

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

    12. 

  12. 

    

    

    

        }
    

    13. 

  13. 

    

    

    

      });

background.html



  1. 

    

    

    

    <!doctype html>
    

    2. 

  2. 

    

    

    

    <html>
    

    3. 

  3. 

    

    

    

      <head>
    

    4. 

  4. 

    

    

    

            <title>
    

    5. 

  5. 

    

    

    

               Getting Started Extension's Popup
    

    6. 

  6. 

    

    

    

            </title>
    

    7. 

  7. 

    

    

    

          <script src="background.js">
    

    8. 

  8. 

    

    

    

           </script>
    

    9. 

  9. 

    

    

    

     </head>
    

    10. 

  10. 

    

    

    

      <body>
    

    11. 

  11. 

    

    

    

           <p>
    

    12. 

  12. 

    

    

    

              Hello!
    

    13. 

  13. 

    

    

    

          </p>
    

    14. 

  14. 

    

    

    

         <div id="r">
    

    15. 

  15. 

    

    

    

         </div>
    

    16. 

  16. 

    

    

    

       </body>
    

    17. 

  17. 

    

    

    

     
    

    18. 

  18. 

    

    

    

    </html>

background.js



  1. 

    

    

    

    chrome.runtime.onMessage.addListener(
    

    2. 

  2. 

    

    

    

      function(request, sender, sendResponse) {
    

    3. 

  3. 

    

    

    

        console.log(sender.tab ?
    

    4. 

  4. 

    

    

    

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

    5. 

  5. 

    

    

    

                    "from the extension");
    

    6. 

  6. 

    

    

    

        if (request.greeting == "hello")
    

    7. 

  7. 

    

    

    

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

    8. 

  8. 

    

    

    

      });
    

    9. 

  9.

popup.html



  1. 

    

    

    

    <!doctype html>
    

    2. 

  2. 

    

    

    

    <html>
    

    3. 

  3. 

    

    

    

      <head>
    

    4. 

  4. 

    

    

    

            <title>
    

    5. 

  5. 

    

    

    

               Getting Started Extension's Popup
    

    6. 

  6. 

    

    

    

            </title>
    

    7. 

  7. 

    

    

    

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

    8. 

  8. 

    

    

    

            </script>
    

    9. 

  9. 

    

    

    

         <script src="popup.js">
    

    10. 

  10. 

    

    

    

           </script>
    

    11. 

  11. 

    

    

    

        </head>
    

    12. 

  12. 

    

    

    

      <body>
    

    13. 

  13. 

    

    

    

           <p>
    

    14. 

  14. 

    

    

    

              Hello!
    

    15. 

  15. 

    

    

    

          </p>
    

    16. 

  16. 

    

    

    

         <div id="r">
    

    17. 

  17. 

    

    

    

         </div>
    

    18. 

  18. 

    

    

    

       </body>
    

    19. 

  19. 

    

    

    

     
    

    20. 

  20. 

    

    

    

    </html>

popup.js



  1. 

    

    

    

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

    2. 

  2. 

    

    

    

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

    3. 

  3. 

    

    

    

        console.log(response.farewell);
    

    4. 

  4. 

    

    

    

      });
    

    5. 

  5. 

    

    

    

    });

参考资料

[1]Content脚本与扩展的其他页面脚本的消息传递http://blog.csdn.net/greatpresident/article/details/9052801

[2]Javascript中大括号“{}”的多义性http://www.cnblogs.com/snandy/archive/2011/02/28/1966894.html

Chrome插件消息传递实例的更多相关文章

  1. 利用chrome插件批量读取浏览器页面内容并写入数据库

    试想一下,如果每天要收集100页网页数据甚至更多.如果采用人工收集会吐血,用程序去收集也就成为一个不二的选择.首先肯定会想到说用java.php.C#等高级语言,但这偏偏又有个登陆和验证码,搞到无所适 ...

  2. 微软专家推荐11个Chrome 插件

    Web开发人员,需要长时间使用浏览器,尽管Windows10 Edge浏览器启动非常快速,且支持110多种设备,Edge支持基于JS 扩展,但也删除了很多旧功能像Active-X等插件.多数情况下,插 ...

  3. 我的项目：一个chrome插件的诞生记，名字叫jumper

    选课是个问题,为了选课,便有了以下的故事. 最开始,萌生想法于2013年7月. 接着网上了解了chrome的结构知识,却发现例子是假的. 幸好有之前师兄的一个同功能插件开源,但代码写得很乱,我喜欢逻辑 ...

  4. Chrome插件Visual Event查看Dom元素绑定事件的利器

    找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享. 用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开 ...

  5. 【干货】Chrome插件(扩展)开发全攻略(不点进来看看你肯定后悔)

    写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github ...

  6. 【干货】Chrome插件(扩展)开发全攻略

    写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github ...

  7. 2018-10-31 在线代码离线翻译Chrome插件"一马"v0.0.8

    续前文: Chrome插件实现GitHub代码离线翻译v0.0.4 添加了对"码云"在线代码的翻译支持, 因此改名暂为"一马". 在此贴中调研了常用的在线代码网 ...

  8. chrome 浏览器插件开发（一）—— 创建第一个chrome插件

    最近在开发一个chrome插件,在网上找到了一些的文章,虽说按照文章可以写出对应的例子,但若要进行实际开发,发现还是有不少文章中没有的坑.下面我将结合我在开发过程中遇到的几个方面,对这些坑做一下补充. ...

  9. Chrome插件(扩展)

    [干货]Chrome插件(扩展)开发全攻略   写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均 ...

随机推荐

  1. finecms5采集接口下载

    哪里有finecms采集接口可以下载?我们在用finecms建站时比较纠结的是要如何采集文章,finecms商城是有售卖采集插件,价格是50元,有些朋友感觉比较贵,不太愿意买,我们也是比较权衡了才很久 ...

  2. RN animated缩放动画

    效果图: 代码: import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, Animated, T ...

  3. Python3学习之路~6.3 类变量 VS 实例变量

    类变量 VS 实例变量 #Author:Zheng Na # 实例里面可以查询.增加.删除.修改实例变量 class Role: # 类名 # 类变量 name = '我是类name' n=1 n_l ...

  4. 安装setuptools

    1.下载地址:https://pypi.python.org/pypi/setuptools 2.这是一个压缩文件,将其解压到安装目录,并进入该文件夹,按住shift键后,在文件夹空白处点击鼠标右键, ...

  5. swiper 视频轮番

    百度搜索:swiper 视频轮番 转载1:https://blog.csdn.net/Aimee1608/article/details/79637929 项目中使用swiper插件嵌套video标签 ...

  6. from C++ to Java

    绝大部分对象都是指针,创建对象习惯性用new const ->  final 枚举类型 与 int的相互转换: 从int到enum: MyEnum.values()[x], where x mu ...

  7. 一个基于JRTPLIB的轻量级RTSP客户端(myRTSPClient)——实现篇：（九）以g711-mulaw为例添加新的编码格式解析支持

    一.myRtspClient音频解析架构 AudioTypeBase是处理解析各种编码的音频数据的接口类.处理MPA数据的MPEG_Audio类和处理g711-mulaw的PCMU_Audio类均从A ...

  8. [转]记解决一次“HTTP Error 400. The request URL is invalid”的错误

    今天将图片服务切到使用了cdn的机器上面去,然后就部分图片报如下图错误“HTTP Error 400. The request URL is invalid” 看到这种错误信息,一般的开发者心中可能会 ...

  9. iOS Xcode 用 GitHub 托管项目

    直接在xcode里用Github教程:http://jingyan.baidu.com/article/ab0b5630936ab6c15afa7d1c.html 经过本人尝试之后,发现,使用官网的客 ...

  10. maven pom文件报错：Multiple annotations found at this line 解决方案（转）

    研究maven多模块项目时,因为家里和公司不能同时开发,所以把家里搭建好的项目复制到公司继续研究, 当时家里的电脑搭建好项目之后是没问题的,但是复制到公司的eclipse上之后就看到pom文件出现下面 ...