最近學習了一些前端知識，準備找點方向和專案在工作之餘練練手。偶然間被 ChatGPT 提醒，覺得 Chrome 擴充開發是一個非常不錯的方向。
Chrome 擴充是擴充套件瀏覽器功能的小程式，使用者可以透過 Chrome Web Store 下載和安裝。這些擴充能夠增強瀏覽器的效能和使用者體驗，例如廣告攔截、實時翻譯、任務管理、筆記記錄等。外掛還提供自定義功能，使使用者能夠根據個人喜好調整瀏覽器外觀和書籤管理。同時，安全外掛可以保護使用者隱私和資料安全，開發擴充幫助開發者更高效地除錯程式碼。跨平臺同步功能使得使用者可以在不同裝置上享有一致的瀏覽體驗。Chrome 應用市場豐富多樣，滿足各種需求。
優勢
在我看來，Chrome 擴充有一下幾點好處：
- 操作簡單快捷。相比較普通的
Web頁面，擴充可以更快直達使用者，免去跳轉切換的繁瑣手續。配合快捷鍵更是如虎添翼，直上雲霄。 - 開發成本低。
Chrome擴充開發只需要建立符合Chrome要求的目錄即可。簡單的一鍵式直達功能不需要工程化，直接一兩個方法解決。前端程式碼完全可以比照Web端編寫，甚至程式碼拿來即用，相容性非常好。 - 開發效率高。據我自己體驗，
Chrome擴充的頁面相對簡單和獨立，對於大量功能性頁面，不需要太多互動設計，大大降低了開發難度，提升開發效率。對於一個前端小白的我來說，跟 ChatGPT 對話就能完成類似Postman單頁面的開發。甚至還能微調CSS提升美觀程度。
還有一個不咋上的檯面的原因，就是可以直接抄別人的程式碼。比如我需要內建一個歷史頁面的管理功能，直接去 Chrome 商店下載一個擴充，然後發動抄能力，把原始碼抄過來即可，直呼過癮。我已經在實踐專案中抄了 3 個別人外掛的原始碼，其中復活了一個由於未及時適配 Manifest V3 而被下架的外掛，功能就是防止瀏覽器視窗關閉最後一個標籤時會關閉整個視窗，有興趣的可以私聊發原始碼交流。
下面正式進入正題，如何開發 Chrome 擴充。
準備
首先你需要具備一些知識：HTML 、CSS 、 JavaScript 等。
其次需要了解 Chrome 擴充開發規範和 API。
最後你需要一件趁手的兵器，我用的 Webstorm 。
第一步
首先需要一個 manifest.json 檔案。manifest.json 檔案是 Chrome 擴充套件的配置檔案，定義了擴充套件的基本資訊、許可權和功能。下面是一個簡單的示例：
{
"manifest_version": 3,
"name": "FunTester Extension",
"version": "1.0",
"description": "This is a simple Chrome extension example.",
"icons": {
"48": "icon48.png",
"128": "icon128.png"
},
"permissions": [
"tabs",
"storage"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": "icon48.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"web_accessible_resources": [
{
"resources": ["content.js"],
"matches": ["<all_urls>"]
}
]
}
以下是其主要功能的簡介：
-
基本資訊：
- manifest_version：指定清單檔案的版本，目前最新版本是 3。
- name：擴充套件的名稱。
- version：擴充套件的版本號。
- description：擴充套件的簡短描述。
- icons：定義擴充套件的圖示，可以指定不同尺寸的圖示。
-
許可權：
- permissions：列出擴充套件需要的許可權，例如訪問標籤頁、儲存等。這決定了擴充套件可以訪問的瀏覽器功能和使用者資料。
-
後臺指令碼：
-
background：定義後臺指令碼，在 manifest_version 3 中使用
service_worker。後臺指令碼在瀏覽器啟動時執行，管理擴充套件的生命週期和處理事件。
-
background：定義後臺指令碼，在 manifest_version 3 中使用
-
瀏覽器動作：
- action：定義擴充套件圖示的預設行為，如點選圖示時彈出的頁面（popup），可以設定預設彈出頁面和圖示。
-
內容指令碼：
- content_scripts：定義內容指令碼，這些指令碼將注入到匹配的網頁中執行。內容指令碼可以修改網頁內容或監聽網頁事件。
-
可訪問資源：
- web_accessible_resources：定義擴充套件中可以被網頁訪問的資源，例如內容指令碼或圖示。這使得網頁能夠訪問擴充套件內的特定檔案。
透過配置 manifest.json 檔案，可以定義和控制 Chrome 擴充套件的各種功能和行為，包括使用者介面、後臺處理、網頁內容修改和許可權管理。這使得開發者能夠建立功能豐富且安全的瀏覽器擴充套件。
以上資訊建議去官方檢視，我就是因為版本 V2 教程耽誤了好一陣子功夫。
常用功能
popup 頁面
在 Chrome 擴充套件中，popup 頁面是指當使用者點選擴充套件圖示時彈出的介面。這個介面通常用於提供使用者互動或展示資訊。Popup 頁面由一個 HTML 檔案組成，可以包含 JavaScript 和 CSS 來實現其功能和樣式。
popup 頁面配置方式如下：
{
"manifest_version": 3,
"name": "FunTester Extension",
"version": "1.0",
"description": "This is a simple Chrome extension example.",
"action": {
"default_popup": "popup.html",
"default_icon": "icon48.png"
},
// 其他配置項...
}
這是一個簡單的 popup 頁面：
<!DOCTYPE html>
<html>
<head>
<title>Popup</title>
<style>
body {
width: 300px;
height: 200px;
font-family: Arial, sans-serif;
padding: 10px;
}
button {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple popup example.</p>
<button id="myButton">Click me</button>
<script src="popup.js"></script>
</body>
</html>
不清楚是什麼版本開始，或者一直就這樣。Chrome 擴充套件的安全性設計確實不允許在 HTML 頁面中直接使用 JavaScript 程式碼來載入或執行擴充套件的功能。Chrome 擴充套件透過內容安全性策略來限制可以在頁面上執行的指令碼。這意味著擴充套件不能簡單地透過內聯 <script> 標籤或透過 document.write() 插入的指令碼來執行。這是為了防止惡意程式碼的執行和保護使用者的安全。所以都是寫在另外的 js 檔案當中。
假如我們想給這個 myButton 新增一個 onClick 事件的處理方法，可以在 popup.js 中新增下面的程式碼：
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('myButton').addEventListener('click', function() {
alert('Button clicked!');
});
});
background
background.js 檔案是 Chrome 擴充套件的後臺指令碼，用於處理長期執行的任務、事件和狀態管理。它在瀏覽器的後臺執行，並且在瀏覽器啟動時載入。對於 manifest_version 3，使用 service_worker 作為後臺指令碼。
下面是配置方法：
{
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
// 其他配置項...
}
而在 V2 當中是這麼配置的：
{
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": false
},
// 其他配置項...
}
顧名思義，background.js 就是作為背景存在，無論當我們在哪個頁面上都會被載入。在 manifest_version 3 中，透過在 manifest.json 檔案中定義 background 部分並引用 background.js 作為服務工作者，可以配置後臺指令碼來處理擴充套件的安裝事件、訊息傳遞、瀏覽器事件監聽、持久儲存、定時任務和網路請求。透過這種方式，可以在後臺指令碼中實現複雜的邏輯和狀態管理，同時與其他擴充套件元件進行通訊。
下面是 background.js 主要的功能演示：
1. 處理安裝事件
在擴充套件安裝或更新時執行一些初始化操作：
chrome.runtime.onInstalled.addListener((details) => {
if (details.reason === 'install') {
console.log("Extension installed");
// 初始化一些資料
chrome.storage.local.set({initialized: true});
} else if (details.reason === 'update') {
console.log("Extension updated to version " + chrome.runtime.getManifest().version);
}
});
2. 訊息傳遞
監聽和處理來自內容指令碼（content scripts）、彈出頁面（popup）和其他部分的訊息：
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === "GREETINGS") {
console.log("Received message from", sender.tab ? "content script" : "popup", ":", message.payload);
sendResponse({message: "Hello from background script"});
}
});
3. 瀏覽器事件監聽
監聽瀏覽器的各種事件，例如標籤頁更新：
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status === 'complete') {
console.log("Tab updated: ", tabId);
// 在更新的標籤頁中執行一些操作
}
});
4. 持久儲存和同步
使用 Chrome 儲存 API 在瀏覽器關閉時保持資料持久化：
// 儲存資料
chrome.storage.local.set({key: 'value'}, () => {
console.log('Value is set to value');
});
// 獲取資料
chrome.storage.local.get(['key'], (result) => {
console.log('Value currently is ' + result.key);
});
我們還可以將資料儲存到雲端，方便跨裝置同步：
// 儲存資料到同步儲存
chrome.storage.sync.set({key: 'value'}, () => {
console.log('Value is set to value');
});
// 獲取同步儲存中的資料
chrome.storage.sync.get(['key'], (result) => {
console.log('Value currently is ' + result.key);
});
// 刪除同步儲存中的資料
chrome.storage.sync.remove(['key'], () => {
console.log('Value is removed');
});
// 清空所有同步儲存資料
chrome.storage.sync.clear(() => {
console.log('All sync storage data is cleared');
});
5. 定時任務
設定定時器來定期執行任務：
setInterval(() => {
console.log("Periodic task running...");
// 執行定期任務
}, 60000); // 每分鐘執行一次
6. 網路請求
發起網路請求，處理資料，並與伺服器通訊：
function fetchData() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
}
// 定期獲取資料
setInterval(fetchData, 3600000); // 每小時執行一次
content_scripts
在 Chrome 擴充套件中，content.js 是內容指令碼，用於在匹配的網頁上執行 JavaScript 程式碼。內容指令碼可以修改網頁的 DOM 結構，與頁面進行互動，並在瀏覽器頁面載入時注入執行。
配置方法如下：
{
"manifest_version": 3,
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
假如我想在頁面 body 中新增一個元素，可以在 content.js 中新增以下程式碼：
console.log("Content script loaded");
// 在頁面 DOM 載入完成後執行操作
document.addEventListener('DOMContentLoaded', function() {
// 在頁面中插入一個 div 元素
const div = document.createElement('div');
div.textContent = 'This content is injected by Chrome extension.';
document.body.appendChild(div);
});
Chrome 擴充套件中的 content.js 主要功能包括：
- DOM 操作：修改頁面的 DOM 結構，例如插入、刪除或修改元素。
- 事件監聽：監聽頁面上的各種事件，如點選、輸入、滾動等，以響應使用者操作。
- 與頁面互動：與頁面上的元素進行互動，獲取或修改它們的內容、屬性和樣式。
- 資料注入：在頁面載入時向頁面注入自定義的 HTML、CSS 或 JavaScript，改變頁面的外觀或行為。
- 內容修改和過濾：根據特定規則修改頁面內容，過濾廣告、隱藏特定元素或修改網頁樣式。
-
訊息傳遞：與擴充套件的其他部分（如後臺指令碼
background.js、彈出頁面popup.js）進行訊息傳遞和通訊。 - 資料採集和分析：收集頁面上的資料，進行分析或傳送到後臺進行處理。
- 頁面狀態監控：監控頁面的載入狀態和變化，執行相應的操作或顯示載入狀態。
- 與第三方服務整合：與網頁上的第三方服務或 API 進行整合和互動，獲取資料或執行操作。
右鍵選單
在 Chrome 擴充套件中，右鍵選單（Context Menu）是指使用者右鍵點選瀏覽器頁面或特定元素時彈出的選單選項。開發者可以透過 Chrome 擴充套件來新增自定義的右鍵選單選項，以提供更多的功能和互動性。
若想使用，需要在許可權當中新增 contextMenus 內容，如下：
"permissions": [
"contextMenus"
],
我們通常會把建立右鍵選單的方法放到 background 當中，這樣就能一直執行。下面是新增右鍵選單以及監聽時間的程式碼演示：
// 建立一個右鍵選單項
chrome.contextMenus.create({
id: "myContextMenu",
title: "Do Something",
contexts: ["page", "selection", "link"]
});
// 監聽右鍵選單點選事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === "myContextMenu") {
console.log("Context menu item clicked:", info);
// 執行相應的操作，例如傳送訊息到 content script 或執行後臺任務
}
});
使用 chrome.contextMenus.create 方法建立右鍵選單項。使用 chrome.contextMenus.onClicked 監聽選單項點選事件。
- 服務端功能測試
- 效能測試專題
- Java、Groovy、Go、Python
- 單元&白盒&工具合集
- 測試方案&BUG&爬蟲&UI 自動化
- 測試理論雞湯
- 社群風采&影片合集