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）發送消息如下：

  
  
 
 
         

   
   
  
  
          
 
           
 
            
 
           
 
           
 
            

              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