[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.addEventListener("message",function(ev){
  console.log(ev.data)
})
​
// 傳送端
window.postMessage(data,"*")
複製程式碼

外掛內部指令碼與content-script通訊

這兩者之間的通訊則是通過chrome提供的apichrome.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("收到響應");
})