Chrome擴展插件開發之通訊方式

Chrome擴展插件開發之通訊方式

概述

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("收到響應");
})
複製代碼