谷歌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