chrome扩展开发：[10]消息传递

转自：http://jingyan.baidu.com/article/414eccf616e2c56b431f0a97.html

工具/原料

• chrome浏览器

• 文本编辑器

概述

1. 1

   前面几篇文章我们介绍了browser action 、background pages、content scripts。

   他们是在不同的上下文中运行的，不能彼此直接访问，有什么办法在他们之间传递数据或消息吗？答案是:消息传递（Message Passing）.下面是官方文档的截图：

   
2. 2

   消息分为三种，一次性消息、长效消息、扩展间消息，就是文档中所说的， one-time requests， long-lived connections， cross-extension messages

3. 3

   一次性消息（one-time requests）

   从content script发送给background：

   chrome.runtime.sendMessage({cmd: "mycmd"}, function(response) {  console.log(response); });

   从background向content script发送消息：

   chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {  chrome.tabs.sendMessage(tabs[0].id, {cmd: "mycmd"}, function(response) {    console.log(response);  }); });

   接收方代码：

   chrome.runtime.onMessage.addListener(  function(request, sender, sendResponse) { 

   console.log(sender.tab ?  "from a content script:" + sender.tab.url :                "from the extension");

    if (request.cmd== "mycmd") 

         sendResponse( "ok"); 

     });

4. 4

   长效消息（long-lived connections）是现在消息的收发双方建立通道，然后通过这个通道收发消息。

   连接主动方：

   var port = chrome.runtime.connect({name: "con1"}); port.postMessage({cmd: "mycmd"}); port.onMessage.addListener(function(msg) {  

   if (msg.recmd== remycmd") 

       port.postMessage({cmd: "mycmd2"}); 

     else if (msg.recmd== "remycmd2") 

       port.postMessage({cmd: "mycmd3"}); 

   });

   连接被动方：

   chrome.runtime.onConnect.addListener(function(port) {  console.assert(port.name == "con1");  port.onMessage.addListener(function(msg) {

       if (msg.cmd== "mycmd")     

    port.postMessage({recmd: "remycmd"});

       else if (msg.cmd == "mycmd2") 

         port.postMessage({recmd: "remycmd2"});

       else if (msg.cmd== "mycmd3")

         port.postMessage({recmd: "remycmd3"});

     });

    });

5. 5

   扩展间消息（cross-extension messages）是在不同的扩展之间收发消息。

   下面是官方文档的代码示例：

   
   END

一次性消息的例子

1. 我们修改下前面几节的代码，演示一下one-time requests的机制。

   基本思路是：

   cs1.js获取到新闻列表后发送给background，background将其保存到变量中

   popup每次弹出时向background获取其保存的列表，然后显示到弹出窗口中。

2. cs1.js中发送新闻列表的代码：

   var newsArray=[];

   for(var i=0;i<len;i++){

   newsArray.push($(alist[i]).attr('title'));

   }

   chrome.extension.sendMessage({cmd: "setNewsArr",'arr':newsArray},function(response) {

   });

3. background.js中处理消息的代码：

   chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {

   if(request.cmd=='setNewsArr'){

   console.log(request.arr)

   g_newsArr=request.arr;

   }else if(request.cmd=='getNewsArr'){

   sendResponse({'arr':g_newsArr});

   }

   })

4. popup.js中，获取新闻列表的代码：

   chrome.extension.sendMessage({cmd: "getNewsArr"},function(response) {

   if(response.arr){

   var len=response.arr.length;

   for(var i=0;i<len;i++){

   $('body').append("<br>"+response.arr[i]+'<br>');

   }

   }

   });

5. 重新加载扩展，打开csdn首页，几秒钟后点击扩展图标。

   
   END

注意事项

• 示例代码下载地址：http://pan.baidu.com/s/1eQijCga#dir/path=%2F%E7%BD%91%E7%BB%9C%E5%85%B1%E4%BA%AB%2Ftest%20-%20%E6%B6%88%E6%81%AF%E4%BC%A0%E9%80%92