1.1 Chrome 插件的魅力與應用場景
Chrome 插件是增強 Chrome 瀏覽器功能的得力助手,能實現廣告攔截、密碼管理、標簽管理等實用功能。在日常辦公中,我們可以借助插件提升效率,如自動填充表單、快速保存網頁內容;在瀏覽網頁時,通過插件美化頁面、屏蔽廣告,優化瀏覽體驗;對于數據分析師或爬蟲愛好者,插件還能用于抓取網頁數據并保存到本地。Chrome 插件豐富了瀏覽器的功能,為用戶帶來了高度定制化的瀏覽體驗。
1.2 為什么要學習 Chrome 插件開發
Chrome 插件開發門檻較低,掌握基礎的 HTML、CSS 和 JavaScript 知識即可入門,同時能快速實現實用功能。通過開發插件,我們可以打造符合自己或團隊需求的工具,提升工作效率。此外,學習 Chrome 插件開發還能加深對 Web 技術的理解,拓展技術視野。而且,Chrome 瀏覽器市場占有率高,開發的插件能惠及大量用戶,具有廣泛的應用前景。
1.3 本文目標與讀者對象
本文旨在帶領讀者從零開始,逐步掌握 Chrome 插件開發的核心知識與實戰技巧。無論是對插件開發感興趣的初學者,還是有一定經驗想進一步提升的開發者,都能從本文中獲取有價值的信息。通過閱讀本文,讀者將了解 Chrome 插件的基本架構、核心 API,學會開發簡單插件,并掌握測試、調試及發布插件的方法。
二、Chrome 插件開發基礎
2.1 插件構成要素
2.1.1 manifest.json:插件的靈魂配置文件
manifest.json 是 Chrome 插件的核心配置文件,位于插件根目錄。它指定了插件的名稱、版本、圖標等基礎信息,同時根據插件功能聲明權限,確定要在后臺和網頁上運行哪些文件。例如:
json
{"manifest_version": 3,"name": "My Chrome Extension","version": "1.0","description": "這是一個簡單的Chrome插件示例","action": {"default_popup": "popup.html","default_icon": {"16": "icon16.png","48": "icon48.png","128": "icon128.png"}},"permissions": ["activeTab"]
}
其中,manifest_version
聲明使用的 Manifest 版本,Chrome 推薦使用版本 3;name
和version
分別為插件的名稱和版本號;action
定義了插件的彈出窗口和圖標,這里指定了popup.html
作為默認彈出頁面;permissions
聲明插件需要的權限,activeTab
權限用于訪問當前活躍的頁面。
2.1.2 Content Scripts:網頁內容的操控者
Content Scripts 是可以通過 DOM 操作網頁內容的腳本文件。它能在網頁上下文中運行,讀取和修改網頁的 DOM 元素、CSS 樣式以及 JavaScript 變量。例如,我們可以編寫 Content Scripts 來實現網頁元素的隱藏、樣式的修改或數據的提取。內容腳本的注入可以通過在 manifest.json 中進行靜態聲明,也可以動態聲明或以編程方式注入。例如,通過靜態聲明注入內容腳本的配置如下:
json
{"content_scripts": [{"matches": ["<all_urls>"],"js": ["content.js"]}]
}
上述配置表示content.js
腳本將在所有網址的頁面中執行。
2.1.3 Service Worker:插件的后臺守護者
Service Worker 用于執行后臺任務,在擴展程序的整個生命周期中持續運行。它可以監聽瀏覽器標簽更新、監聽插件安裝或更新、定時通知提醒、實現廣告攔截,還能與彈出窗口或內容腳本通信。例如,使用 Service Worker 往內容腳本發消息,獲取當前 tab 的標題:
javascript
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {var tab = tabs[0];chrome.tabs.sendMessage(tab.id, { message: 'getTitle' }, function (response) {console.log('當前頁面標題:', response.title);});
});
在 manifest.json 中,通過以下配置指定 Service Worker 腳本:
json
{"background": {"service_worker": "service - worker.js"}
}
2.2 核心 API 解讀
2.2.1 chrome.tabs:標簽頁的魔法師
用途:用于操作瀏覽器標簽頁,如創建、切換、關閉或獲取當前活動標簽頁。
常用方法:
chrome.tabs.create(object createProperties, function callback)
:創建新標簽頁。例如,chrome.tabs.create({ url: 'https://www.example.com' });
將打開一個指定網址的新標簽頁。chrome.tabs.query(object queryInfo, function callback)
:查詢標簽頁。如chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { /* 處理查詢結果 */ });
可獲取當前活動窗口中的活動標簽頁。chrome.tabs.update(tabId, object updateProperties, function callback)
:更新標簽頁屬性,如chrome.tabs.update(tabId, { url: 'https://new - url.com' });
可更改指定標簽頁的網址。
2.2.2 chrome.action:插件圖標的掌控者
用途:允許開發者控制插件圖標的外觀、交互行為以及彈出窗口(Popup)。
常用方法:
chrome.action.setIcon(object details, function callback)
:設置插件圖標。例如,chrome.action.setIcon({ path: 'new - icon.png' });
可更換插件圖標。chrome.action.setPopup(object details, function callback)
:設置插件彈出窗口。如chrome.action.setPopup({ popup: 'new - popup.html' });
可改變插件點擊后彈出的頁面。chrome.action.onClicked.addListener(function callback)
:監聽插件圖標點擊事件。chrome.action.onClicked.addListener(function (tab) { console.log('插件圖標被點擊了'); });
在圖標被點擊時執行相應操作。
2.2.3 chrome.storage:數據存儲的小助手
用途:用于存儲插件數據,當用戶清除瀏覽數據時,擴展程序存儲空間不會被清除。
兩種存儲方式:
chrome.storage.sync
:同步存儲,數據會在用戶的多個設備間同步。例如:
javascript
chrome.storage.sync.set({ key: 'value' }, function () {console.log('數據已同步存儲');
});
chrome.storage.sync.get(['key'], function (result) {console.log('獲取到的數據:', result.key);
});
chrome.storage.local
:本地存儲,數據僅存儲在當前設備。使用方法與chrome.storage.sync
類似,只需將sync
替換為local
。
2.2.4 chrome.runtime:插件運行環境的管理者
用途:管理插件運行環境,支持后臺腳本與內容腳本通信。
常用方法:
chrome.runtime.sendMessage(destination, message, options, function responseCallback)
:發送消息。例如,在后臺腳本中向內容腳本發送消息:
javascript
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {var tab = tabs[0];chrome.tabs.sendMessage(tab.id, { message: 'hello from background' }, function (response) {console.log('收到內容腳本的響應:', response);});
});
在內容腳本中接收消息:
javascript
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {if (message.message === 'hello from background') {sendResponse({ response: 'hello back' });}
});
chrome.runtime.onInstalled.addListener(function callback)
:監聽插件安裝或更新事件。可用于在插件安裝或更新時執行初始化操作。
2.2.5 chrome.webRequest:網絡請求的攔截者
用途:監控或修改 HTTP 請求(需在 manifest.json 聲明權限)。
適用場景:廣告攔截等。
示例(攔截請求):
在 manifest.json 中添加權限:
json
{"permissions": ["webRequest", "webRequestBlocking"]
}
在后臺腳本中攔截請求:
javascript
chrome.webRequest.onBeforeRequest.addListener(function (details) {if (details.url.match(/ads\.example\.com/)) {return { cancel: true };}return {};},{ urls: ["<all_urls>"] },["blocking"]
);
上述代碼可攔截所有指向ads.example.com
的請求。
2.2.6 chrome.contextMenus:右鍵菜單的定制者
用途:在瀏覽器右鍵菜單中添加自定義選項。
示例:
在 manifest.json 中添加權限:
json
{"permissions": ["contextMenus"]
}
在后臺腳本中創建右鍵菜單:
javascript
chrome.contextMenus.create({title: "Search Google for '%s'",contexts: ["selection"],onclick: function (info, tab) {var searchText = info.selectionText;chrome.tabs.create({ url: `https://www.google.com/search?q=${searchText}` });}
});
上述代碼在用戶右鍵選擇文本時,添加一個 “Search Google for '% s'” 的菜單選項,點擊后將在新標簽頁中搜索所選文本。
2.2.7 chrome.notifications:桌面通知的發送者
用途:向用戶發送系統級通知(需權限)。
示例:
在 manifest.json 中添加權限:
json
{"permissions": ["notifications"]
}
在后臺腳本中發送通知:
javascript
chrome.notifications.create('reminder', {type: 'basic',title: '提醒',message: '該做某事啦!',iconUrl: 'icon.png'
});
上述代碼將發送一個簡單的桌面通知。
三、插件開發實戰
3.1 “Hello World” 插件:插件開發初體驗
3.1.1 創建項目結構
首先,創建一個名為HelloWorld
的文件夾,作為插件項目的根目錄。在該文件夾下,再創建一個popup
文件夾。項目結構如下:
plaintext
HelloWorld/
├── popup/
圖片可以從 iconfont 等圖標庫下載,準備好三種不同尺寸的圖標:icon16.png
、icon48.png
和icon128.png
,并將它們放置在HelloWorld
文件夾中。
3.1.2 編寫 manifest.json
在HelloWorld
文件夾中創建manifest.json
文件,并添加以下內容:
json
{"manifest_version": 3,"name": "Hello Extensions","description": "Base Level Extension","version": "1.0","action": {"default_popup": "popup/popup.html","default_icon": {"16": "icon16.png","48": "icon48.png","128": "icon128.png"}}
}
此manifest.json
文件聲明了插件的基本信息,包括插件規范版本、名稱、描述、版本和圖標,同時通過action
字段指定了點擊插件圖標后彈出的窗口為popup/popup.html
。
3.1.3 構建 popup 頁面
在popup
文件夾中創建popup.html
文件,內容如下:
html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device-width, initial - scale = 1.0"><title>Hello World</title><link rel="stylesheet" href="popup.css">
</head><body><h1>Hello World!</h1><script src="popup.js"></script>
</body></html>
接著,在popup
文件夾中創建popup.css
文件,添加簡單的樣式:
css
body {width: 200px;text - align: center;font - family: Arial, sans - serif;
}h1 {color: #333;
}
此時,一個簡單的 “Hello World” 插件已編寫完成。
3.1.4 加載與測試插件
在瀏覽器新標簽頁中輸入chrome://extensions/
,或者通過工具欄打開擴展程序頁面。點擊開發者模式旁邊的切換開關,啟用開發者模式。點擊 “加載已解壓縮的文件” 按鈕,選擇HelloWorld
文件夾。安裝完插件后,在工具欄點擊插件圖標,即可看到彈出的 “Hello World!” 界面。
3.2 內容腳本實戰:為網頁添加自定義元素
3.2.1 項目結構搭建
創建一個新的項目文件夾,例如ContentScriptDemo
。在該文件夾下,創建content.js
文件和manifest.json
文件。項目結構如下:
plaintext
ContentScriptDemo/
├── content.js
├── manifest.json
3.2.2 配置 manifest.json
在manifest.json
文件中添加以下內容:
json
{"manifest_version": 3,"name": "Content Script Example","description": "Add custom element to web pages","version": "1.0","content_scripts": [{"matches": ["<all_urls>"],"js": ["content.js"]}]
}
上述配置通過content_scripts
字段指定了content.js
腳本將在所有網址的頁面中執行。
3.2.3 編寫內容腳本 content.js
在content.js
文件中編寫如下代碼:
javascript
// 創建一個新的div元素
var newDiv = document.createElement('div');
newDiv.style.color ='red';
newDiv.style.fontSize = '20px';
newDiv.textContent = '這是插件添加的自定義內容';// 將新元素添加到頁面body中
document.body.appendChild(newDiv);
該腳本會在頁面的body
中插入一個紅色、字體大小為 20px 的文本內容 “這是插件添加的自定義內容”。
3.2.4 測試內容腳本效果
按照前面介紹的方法,在 Chrome 瀏覽器中加載已解壓縮的ContentScriptDemo
插件。刷新任意網頁,即可看到頁面中添加了自定義的元素。
3.3 使用 Service Worker 實現定時通知
3.3.1 項目結構規劃
創建一個名為ServiceWorkerNotification
的項目文件夾。在該文件夾下,創建service - worker.js
、manifest.json
文件,項目結構如下:
plaintext
ServiceWorkerNotification/
├── service - worker.js
├── manifest.json
3.3.2 配置 manifest.json 支持 Service Worker
在manifest.json
文件中添加如下內容:
json
{"manifest_version": 3,"name": "Service Worker Notification","description": "Send定時通知using Service Worker","version": "1.0","background": {"service_worker": "service - worker.js"},"permissions": ["notifications"]
}
這里通過background
字段指定了后臺運行的 Service Worker 腳本為service - worker.js
,并聲明了notifications
權限用于發送通知。
3.3.3 編寫 Service Worker 代碼實現定時通知
在service - worker.js
文件中編寫如下代碼:
javascript
self.addEventListener('install', function (event) {event.waitUntil(self.registration.showNotification('插件已安裝', {body: '感謝安裝本插件!'}));
});self.addEventListener('activate', function (event) {event.waitUntil(self.registration.showNotification('插件已激活', {body: '插件已激活,開始提供服務。'}));
});// 每小時發送一次通知
setInterval(function () {self.registration.showNotification('定時提醒', {body: '一小時過去了,休息一下吧!'});
}, 60 * 60 * 1000);
上述代碼在插件安裝和激活時會發送通知,并且每小時發送一次定時提醒通知。
3.3.4 加載插件并驗證定時通知功能
在 Chrome 瀏覽器中加載已解壓縮的ServiceWorkerNotification
插件。插件安裝后,會立即收到安裝通知,激活時會收到激活通知,之后每小時會收到一次定時提醒通知,驗證了 Service Worker 實現定時通知的功能。
四、插件的測試與調試
4.1 利用 Chrome 開發者工具進行調試
4.1.1 打開插件調試界面
在 Chrome 瀏覽器中,進入chrome://extensions/
頁面,確保已啟用開發者模式。找到要調試的插件,點擊插件卡片上的 “詳情” 按鈕。在插件詳情頁面中,會看到 “檢查視圖” 選項,點擊 “background page” 對應的 “檢查” 按鈕,可打開后臺腳本的調試界面;如果插件有彈出窗口,點擊 “popup” 對應的 “檢查” 按鈕,可調試彈出窗口的代碼。
4.1.2 調試技巧與常用功能
- 設置斷點:在調試界面的代碼編輯器中,點擊代碼行號旁邊的空白處,即可設置斷點。當代碼執行到斷點處時,會暫停執行,此時可以查看變量的值、單步執行代碼等。
- 查看控制臺輸出:在調試界面的控制臺中,可以查看插件運行過程中輸出的日志信息。通過
console.log()
等方法輸出的內容會顯示在此