谷歌chrome 插件（扩展）开发——进阶篇（c#本地程序和插件交互）下

在上一篇中，我提出了总任务。接下来去实现。

获取网页内容等其它信息，这是content.js 擅长做的事情：

       chrome.extension.onMessage.addListener(
         function(request, sender, sendMessage)
         {
             if (request.cmd == "html")
             {
                 var version = navigator.appName;
                 var cookie=document.cookie;
                 var innerHTML=document.documentElement.innerHTML;
                 var url=document.URL;

                 console.log(version);
                 console.log(url);
                 console.log(cookie);
                 sendMessage({version:version,cookie:cookie,innerHTML:innerHTML,url:url});

             }
             else
                 sendMessage("others");
         });

这段给content.js 添加了消息监听，一旦接受到html命令，就会获取document对象的信息，把信息组织好后，通过sendMessage方法发送出去，显然这是消息的接受者，那么发送者在哪？再来看看background.js:

 function getClickHandler() {
       return function(info, tab) { 

         console.log(info);
         console.log(tab);

         chrome.tabs.sendMessage(tab.id, {"cmd": "html"}, function(response) {
         console.log(response);
         connectToNative(response);
     });

    };
 };

 //在浏览器启动时即创建右键菜单，在页面链接上右击鼠标会显示该菜单，当点击"start program"的时候就会调用getClickHandler（）函数处理
  chrome.contextMenus.create({
     "title" : "noteFirst",
     "type" : "normal",
      "id": "callapp",
     "contexts" : ["page"],
      "enabled": true,
     "onclick" : getClickHandler()
 });

第7行，便是发送消息，从22行，可以看出消息的触发来源于右键菜单。第9行，把从content当中获取的信息，传送到本地客户端：

 var host_name = "com.google.chrome.demo";
 var port = null;

 function connectToNative(message) {
     console.log('Connecting to native host: ' + host_name);
     port = chrome.runtime.connectNative(host_name);
     port.onMessage.addListener(onNativeMessage);
     port.onDisconnect.addListener(onDisconnected);
     sendNativeMessage(message);
 }

 function sendNativeMessage(msg) {
     message = msg;
     console.log('Sending message to native app: ' + JSON.stringify(message));
     port.postMessage(message);
     console.log('Sent message to native app: ' + msg);
 }

 function onNativeMessage(message) {
     console.log('recieved message from native app: ' + JSON.stringify(message));
 }

 function onDisconnected() {
     console.log(chrome.runtime.lastError);
     console.log('disconnected from native app.');
     port = null;
 }

这段说明background 具有收发信息的功能。建立port（第7行），和客户端程序取得连接。给后台建立了消息监听（第8行），用来收消息。通过postMessage（第16行）发消息。

在来看看popup.js:

  function invoke(){

      chrome.tabs.getSelected(null, function (tab) {

      chrome.tabs.sendMessage(tab.id, {"cmd": "html"}, function(response) {
          console.log(response);

          var bg = chrome.extension.getBackgroundPage();
          bg.connectToNative(response);
   });
 });

      updateResult("result1", "invoke..");
   }

 function updateResult(obj, state){
     document.getElementById(obj).innerHTML = state;
 }

 document.addEventListener('DOMContentLoaded', function() {
   document.querySelector('#button1').addEventListener(
       'click', invoke);
 });

popup.js 也是消息的发送者之一。要给content.js发送消息，必须通过chrome api拿到tab.id，即确定当前页面（第3行）。等content回应后，把信息发送到客户端，它需要调用background中的方法connectToNative（8,9两行）。是必须要调用人家的方法吗？不是，这里完全是为了代码复用，遵守DRY原则。

这就是我在基础篇中提出的三种js的通讯，我以一张图概括之：

附上demo  -> nativeMessage