谷歌瀏覽器擴充套件程式的簡易結構和通訊機制
本文已參與「新人創作禮」活動，一起開啟掘金創作之路。
一、擴充套件程式的簡易結構
當前版本 "manifest_version": 3，擴充套件程式的核心檔案 manifest.json 中配置可生成以下簡易結構，詳細程式碼可參考程式碼倉 crxTemplate: 谷歌瀏覽器擴充套件程式的簡易結構和通訊機制 (gitee.com))：
popup
json
"action": {
"default_popup": "page/popup.html"
}
配置 "action" 中的 "default_popup"，在擴充套件程式中新增後點擊會出現 "page/popup.html" 頁面。以下是稀土掘金的瀏覽器外掛：
content
json
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": ["<all_urls>"],
"run_at": "document_end"
}
]
配置 "content_scripts" 後會在 "matches" 匹配的站點上 "run_at" 時機執行 "js" 指令碼。可以獲取當前頁面的一些操作。
panel
json
"devtools_page": "page/devtools-background.html",
配置 "devtools_page" 後會載入外掛時執行 "page/devtools-background.html" 頁面，但是它是不可見的，但是在需要新增 "panel" 時，需要在其執行時使用以下指令碼進行建立，擴充套件程式修改重新載入後重新整理頁面也不會執行，意味著除錯時需要開啟新頁面才有效。
javascript
chrome.devtools.panels.create(
'ChromeDevToolsTemplate',
null,
'../page/panel.html'
)
以下是 Vue DevTools 的瀏覽器外掛對應的 Vue 的 panel：
二、通訊機制
popup.js、content.js 與 panel.js 三者間的通訊機制。
popup.js: ```javascript // button 按鈕點選時傳送訊息 檢視控制檯時需要對 popup 頁面進行檢查，在對應的控制檯輸出 document.querySelector('button').onclick = function () { chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ chrome.tabs.sendMessage(tabs[0].id, {'popup': true}, function(res){ console.log(res); }) }) } // 接收訊息 檢視控制檯時需要對 popup 頁面進行檢查，在對應的控制檯輸出 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){ console.log(message, sender); sendResponse('popup') })
```
content.js:
javascript
// 接收訊息 在當前控制檯輸出
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
console.log(message, sender);
// 傳送訊息 在當前控制檯輸出
chrome.runtime.sendMessage({greet: 'hello, I am content.'}, function(response){
console.log(response);
})
sendResponse('content');
})
panel.js:
javascript
// 該列印是在檢查 panel 的控制檯中，類似於巢狀的控制檯
document.querySelector('button').onclick = function () {
console.log('hello panels!');
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, 'panels', function(res){
console.log(res);
})
})
}
// 接收訊息 列印在檢查 panel 的控制檯中，類似於巢狀的控制檯
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
console.log(message, sender);
sendResponse('panels');
})
以上，從除錯面板上可以看出，這個三塊是屬於不同模組的東西，content.js 是當前頁面的指令碼，popup 是 popup.html 頁面的指令碼，panel 是對應 panel.html 的指令碼，所處理的頁面不一樣，對應的功能也是不一樣的。