一個復雜的 Chrome 擴展程序通常由 content_scripts，background，action popup，side panel，options page，devtools 等部分組成，這些部分所負責的功能各不相同，所處的運行環(huán)境各不相同，所能訪問的 chrome.* API 也各不相同，也因此經常需要通信告訴對方需要做什么。

下面是我畫的一張圖，簡單說明各部分關系：

這些花花綠綠的部分各自運行在不同的環(huán)境中，往往需要相互通信，Chrome 為我們提供了兩種通信方式：

• 一種是一次性請求（one-time requests），一次只能發(fā)一條消息，類似于手機發(fā)短信，跟 HTTP 請求很像。

• 一種是長期連接（long-lived connections），允許發(fā)送多條消息，類似于手機打電話，跟 Websocket 連接很像。

接下來就詳細說說這兩種通信方式。

一次性請求（one-time requests）

如果要向擴展程序的另一部分發(fā)送一條消息，有兩個 API 可供調用：

• chrome.runtime.sendMessage(extensionId?, message)

• chrome.tabs.sendMessage(tabId, message)

從函數簽名很容易看出來，一個是向擴展程序的各個部分發(fā)消息的，另一個是給某個瀏覽器的某個頁簽發(fā)消息的。

為什么設計兩個 API？這是因為 content_scripts 是一個很獨特的存在！

先說說瀏覽器的的工作原理。

瀏覽器的每個頁簽都是單獨的線程。每個頁簽運行在與其他頁簽或擴展相隔離的獨立線程中。如下圖所示

我們在每個頁簽中打開頁面。content_scripts 是一個很特殊的存在！作為被注入到頁面的腳本，它的生命周期跟隨頁面。而擴展程序的其他部分，都有自己的生命周期！如果你在各個部分查看它們的 location，就會發(fā)現，只有 content_scripts 的 origin 是頁面的 url 一樣，而其它部分的 location.origin 都是 chrome://your-extention-id。

知道了 content_scripts 的特殊性后，那么這兩個 API 就很好理解了。

chrome.runtime.sendMessage() 是給擴展程序發(fā)消息的，它的第一個參數是一個可選的 extensionId，意味著不但可以給自身擴展程序發(fā)消息，還能給別的擴展程序發(fā)消息，它發(fā)送的消息可以被擴展的任一部分接收到，包括 background，action popup，side panel，options page，devtools 等等，除了 content_scripts！！！

那么想給 content_scripts 發(fā)送消息怎么辦呢？？？

chrome.tabs.sendMessage() 就是專門用來給 content_scripts 發(fā)消息的！值得注意的是，想要給 content_scripts 發(fā)消息需要指定 tabId，也就是需要指明給哪個頁簽下的頁面的 content_scripts 發(fā)消息。這個設計很好，因為每個頁簽的頁面都運行了一份 content_scripts，這就避免了無關的頁面接收到消息。

發(fā)送消息搞定啦，有方法發(fā)送就得有方法接收才行啊。

接收消息的方法只有一個 API：

chrome.runtime.onMessage.addListener(  (message, sender, sendResponse) => boolean | undefined)

在擴展程序的任意部分（包括 content_scripts）都是用這個接收消息。這很方便。

長期連接（long-lived connections）

長期鏈接的 API 和一次性消息的 API 是相互對應的。

要創(chuàng)建一個可重復使用的長期消息傳遞通道，有兩個 API 可以調用：

• chrome.runtime.connect(extensionId?, connectInfo?): Port

• chrome.tabs.connect(tabId, connectInfo?): Port

這兩個 API 的設計和一次性消息的一樣。

chrome.runtime.connect() 用于和擴展程序的任一部分建立消息通道，除了 content_scripts！！！

而 chrome.tabs.connect() 是專門用來和 content_scripts 建立消息通道噠！

chrome.{runtime,tabs}.connect() 返回的是一個 Port 對象。Port 就是被設計用來在擴展程序的不同部分之間進行雙向通信的一個接口。

作者：dombro

轉自：https://www.cnblogs.com/iovec/p/messaging.html