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中的一個方法