• Chrome插件消息传递实例

    首先吐槽“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.  
    4.    "name": "Say Hello",
    5.  "description": "This extension say hello to you.",
    6.    "version": "1.0",
    7.     "permissions": ["tabs", "<all_urls>"],
    8.     "browser_action": {
    9.       "default_icon": "icon.png",
    10.      "default_popup": "popup.html"
    11.    },
    12.   "background": {
    13.      "page": "background.html"
    14.    },
    15.   "content_scripts": [{
    16.        "matches": ["<all_urls>"],
    17.        "js": ["contentscript.js"]
    18.   }]
    19. }

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

    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.  
    18. </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.  
    20. </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
  • 相关阅读:
    hadoop2.0.x【3】--Yarn Commands
    hadoop2.0.x【2】--Apache Hadoop MapReduce
    hadoop2.0.x【1】--Apache Hadoop NextGen MapReduce (YARN)--翻译与分析
    基于jquery的提交、编辑页面js编写框架
    UIStatusBarStyle PreferredStatusBarStyle does not work on iOS 7
    Protecting resources in iPhone and iPad apps
    使用Xcode 5创建Cocoa Touch Static Library（静态库）
    Example of how to implement a view-based source list (NSOutlineView) using Cocoa Bindings
    转载：收费版APP三年总结（个人经验＋数据图分享）
    OC 导入类 #import和@class 区别
  • 原文地址：https://www.cnblogs.com/7qin/p/9602117.html
Copyright © 2020-2023  润新知