[Chrome擴展插件開發之通信方式 - 掘金](https://juejin.cn/post/6994731393263599653 )]
概述
Chrome擴展插件涉及到部分可以分為web頁面、popup、background、content-script四個部分，其中web頁面不屬於插件的內容，但有些時候頁面存在需要與插件交互的場景，因此這里把頁面與插件之間的通信也一並討論。
需要注意的是，popup和background都是運行在插件上下文中，而content-script則是運行在web頁面的上下文中的。因此，在這里我把擴展插件的通信分為以下幾種情景：
- 插件內部腳本的通信：
popup和background之間的通信； web頁面與content-script的通信；- 插件內部腳本與
content-script之間的通信。
下面對以上幾種情景進行詳細描述。
popup與background通信
由於兩者運行在同一上下文中，理論上，只要得到了對方的window對象，便可以隨意互相訪問，因此對於這兩者之間的通信，直接事例演示~
background.js
var popup = chrome.extension.getViews({ type: "popup" })[0]
// 為所欲為
popup.GetMessageFromBackground("給我的兄弟popup點東西~")
function GetMessageFromPopup(data){
console.log("popup給我的東西~",data)
}
復制代碼popup.js
var background = chrome.extension.getBackgroundPage(); // 得到background頁的windows對象
// 接下來為所欲為~
background.GetMessageFromPopup("給我的兄弟background點東西")
function GetMessageFromBackground(data){
console.log("background給我的東西~",data)
}
復制代碼web頁面與content-script通信
這兩兄弟之間的通信也比較簡單，通過window.addEventListener和window.postMessage即可完成，給上示例
// 接收端
window.addEventListener("message",function(ev){
console.log(ev.data)
})
// 發送端
window.postMessage(data,"*")
復制代碼插件內部腳本與content-script通信
這兩者之間的通信則是通過chrome提供的api chrome.runtime.sendMessage\chrome.runtime.onMessage.addListener進行，兩者之間可以互相接發消息，但需要注意的是，當前者向后者發送消息時，是通過chrome.tabs.sendMessage這個api，示例如下：
接收端
chrome.runtime.onMessage.addListener(function (msg, sender, response) {
console.log(msg, sender);
response();
});
復制代碼content-script向插件內部腳本發送
chrome.runtime.sendMessage("data", function () {
console.log("收到響應");
});
復制代碼插件內部腳本向content-script發送
chrome.tabs.sendMessage(tabId, "data", function () {
console.log("收到響應");
})