Chrome瀏覽器擴充套件開發系列之十三：訊息傳遞Message

由於content scripts執行在Web頁面的上下文中，屬於Web頁面的組成部分，而不是Google Chrome擴充套件程式。但是content scripts又往往需要與Google Chrome擴充套件程式的其他部分通訊以共享資料。

這可以通過訊息傳遞實現，通過彼此互相的訊息的監聽與反饋進行通訊。一個訊息可以包含任何有效的JSON物件，如null，boolean，number，string，array，object。

1)      一次性請求與響應模式

對於一次性請求與響應模式，chrome.runtime.sendMessage(obj, function(response){})是從content scripts發生請求訊息給Google Chrome擴充套件程式頁面。

從Google Chrome擴充套件程式頁面傳送請求訊息給content scripts的時候，需要給出當前tab的ID。

chrome.tabs.query(
    {active: true, currentWindow: true}, 
    function(tabs) {
          chrome.tabs.sendMessage(
            tabs[0].id, 
            {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: "goodbye"});
});

注意：如果為同一個訊息註冊了多個監聽器，則只有第一個監聽器能夠呼叫sendResponse()方法，其他的監聽器將被忽略。

 

2)      保持長期連線的模式

對於保持長期連線的模式，在content scripts與Chrome擴充套件程式頁面之間建立通道（可以為通道命名），可以處理多個訊息。在通道的兩端分別擁有一個chrome.runtime.Port物件，用以收發訊息。

在content scripts主動建立通道如下：

var port = chrome.runtime.connect({name: "yisheng"});//通道名稱
port.postMessage({joke: "Knock knock"});//傳送訊息
port.onMessage.addListener(function(msg) {//監聽訊息
  if (msg.question == "Who's there?")
    port.postMessage({answer: "yisheng"});
  else if (msg.question == "Madame who?")
    port.postMessage({answer: "Madame... Bovary"});
});

 

在Google Chrome擴充套件程式頁面主動建立通道如下：

chrome.tabs.query(
    {active: true, currentWindow: true}, 
    function(tabs) {
          var port = chrome.tabs.connect(//建立通道
            tabs[0].id, 
            {name: "yisheng"}//通道名稱
        );
});

 

在content scripts或Google Chrome擴充套件程式頁面，監聽建立連線的請求如下：

chrome.runtime.onConnect.addListener(function(port) {
  console.assert(port.name == "yisheng");
  port.onMessage.addListener(function(msg) {
    if (msg.joke == "Knock knock")
      port.postMessage({question: "Who's there?"});
    else if (msg.answer == "Madame")
      port.postMessage({question: "Madame who?"});
    else if (msg.answer == "Madame... Bovary")
      port.postMessage({question: "I don't get it."});
  });
});

在content scripts或Google Chrome擴充套件程式頁面的任一端，呼叫chrome.runtime.Port.disconnect()則關閉連線，同時出發disconnect事件。這時，只有另一端監聽chrome.runtime.Port.onDisconnect事件，則可以知道連線關閉。

 

3)      Google Chrome擴充套件程式之間訊息模式

還可以在不同的Google Chrome擴充套件程式之間傳送訊息，只要知道Google Chrome擴充套件程式的ID。這使得Google Chrome擴充套件程式可以釋出服務為其他擴充套件程式所用。

這種Google Chrome擴充套件程式之間的訊息也分為一次性請求與響應模式和保持長期連線的模式。

Google Chrome擴充套件程式監聽呼叫其服務的訊息如下：

//一次性請求與響應模式:
chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    if (sender.id == blacklistedExtension)//黑名單
      return;  // don't allow this extension access
    else if (request.getTargetData)
      sendResponse({targetData: targetData});
    else if (request.activateLasers) {
      var success = activateLasers();
      sendResponse({activateLasers: success});
    }
  });

//保持長期連線的模式:
chrome.runtime.onConnectExternal.addListener(function(port) {
  port.onMessage.addListener(function(msg) {
    // See other examples for sample onMessage handlers.
  });
});

 

傳送呼叫服務的訊息如下：

// The ID of the extension we want to talk to.
var laserExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

// Make a simple request:
chrome.runtime.sendMessage(laserExtensionId, {getTargetData: true},
  function(response) {
    if (targetInRange(response.targetData))
      chrome.runtime.sendMessage(laserExtensionId, {activateLasers: true});
  });

// Start a long-running conversation:
var port = chrome.runtime.connect(laserExtensionId);
port.postMessage(...);

 

4)      Google Chrome擴充套件程式接收指定的Web頁面傳送的訊息

Google Chrome擴充套件程式可以與一些指定地點Web頁面直接收發訊息。

首先，在Google Chrome擴充套件程式的manifest.json檔案設定可以通訊的Web頁面範圍：

"externally_connectable": {
  "matches": ["*://*.example.com/*"]
}

 

其次，在Google Chrome擴充套件程式中監聽Web頁面的訊息如下：

chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    if (sender.url == blacklistedWebsite)
      return;  // don't allow this web page access
    if (request.openUrlInEditor)
      openUrl(request.openUrlInEditor);
});

 

最後，在指定的Web頁面中，傳送訊息如下：

// The ID of the extension we want to talk to.
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

// Make a simple request:
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
  function(response) {
    if (!response.success)
      handleError(url);
});