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