Chrome插件中 popup,background,contantscript消息傳遞機制

chrome 插件主要由三部分構成

1.popup
在用戶點擊擴展程序圖標時（下圖中的下載圖標），都可以設置彈出一個popup頁面。而這個頁面中自然是可以包含運行的js腳本的（比如就叫popup.js）。它會在每次點擊插件圖標——popup頁面彈出時，重新載入。

 

 2.content_scripts

是會注入到Web頁面的JS文件，可以是多個，也可以對注入條件進行設置，也就是滿足什么條件，才會將這些js文件注入到當前web頁面中。

可以把這些注入的js 文件和網頁的個文件看成一個整體，相當於在你網頁中，寫入了這些js 代碼。這樣就可以對原來的web頁面進行操作了。

 

3 background 即插件運行的環境

可以是html+js， 也可以是單純的js

插件啟動后就常駐后台，只有一個。這類腳本是運行在瀏覽器后台的，注意它是與當前瀏覽頁面無關的。

 

 在實際運行過程中

原始web+注入的的content_scripts=新的web頁面

當打開多個頁面時，就會存在多個新的web頁面。因為每個頁面都注入content_scripts。

那么在通信的時候，后台腳本或則popup頁面，怎么確定是與那個頁面進行消息交互呢，通過tabID

tab是什么呢？

 

 上圖就有三個tab標簽，也就是在瀏覽器中打開的網頁對應着一個tab，圖中第二個和第三個雖然url相同，但tabid不一樣。

三個主要部分消息交互機制如下圖

 

 

 通過上圖我們可以把交互消息分為三類：【A】【B】【C】

【A】直接發送消息一般是

//content_scripts——>background  例如
chrome.runtime.sendMessage(
{greeting: message || '你好，我是content-script呀，我主動發消息給后台！'},
function(response) {
		tip('收到來自后台的回復：' + response);
	}
);

　　在發出方是主動發送消息，那么接收方必須時刻准備接受消息，才能保證及時接收到，所以接收方都是通過監聽這一動作來完成消息的接收

// 監聽消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
// code...
 sendResponse('我已收到你的消息：' +JSON.stringify(request));//做出回應
});

　　【B】發送消息一般是先獲取到tabID在發送消息

// 獲取當前選項卡ID
function getCurrentTabId(callback)
{
	chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
	{
		if(callback) callback(tabs.length ? tabs[0].id: null);
	});
}

function sendMessageToContentScript(message, callback)
{
	getCurrentTabId((tabId) =>
	{
		chrome.tabs.sendMessage(tabId, message, function(response)
		{
			if(callback) callback(response);
		});
	});
}


sendMessageToContentScript('你好，我是bg！', (response) => {
		if(response) alert('收到來自content-script的回復：'+response);
	});

　　【C】popup調用后台腳本中的方法

var bg = chrome.extension.getBackgroundPage();
bg.test();//test()是background中的一個方法