按一下擴充功能工具列圖示,簡化目前網頁的樣式設定。
總覽
本教學課程會建構擴充功能,簡化 Chrome 擴充功能和 Chrome 線上應用程式商店說明文件頁面的樣式,讓內容更容易閱讀。
在本指南中,我們要說明如何執行下列操作:
- 使用擴充功能 Service Worker 做為事件協調器。
- 透過
"activeTab"
權限保護使用者隱私。 - 當使用者按一下擴充功能工具列圖示時,執行程式碼。
- 使用 Scripting API 插入及移除樣式表。
- 使用鍵盤快速鍵執行程式碼。
事前準備
本指南假設您具有基本的網路開發經驗。建議您查看 Hello World,瞭解擴充功能開發工作流程。
建立擴充功能
首先,請建立名為 focus-mode
的新目錄,用於存放擴充功能的檔案。如有需要,您可以從 GitHub 下載完整的原始碼。
步驟 1:新增擴充功能資料和圖示
建立名為 manifest.json
的檔案,並加入以下程式碼。
{
"manifest_version": 3,
"name": "Focus Mode",
"description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
"version": "1.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
如要進一步瞭解這些資訊清單鍵,請參閱「在每個分頁中執行指令碼」教學課程,進一步瞭解擴充功能的中繼資料和圖示。
建立 images
資料夾,然後下載圖示至該資料夾中。
步驟 2:初始化擴充功能
擴充功能可以使用擴充功能的 Service 工作站,在背景監控瀏覽器事件。Service Worker 是特殊的 JavaScript 環境,可處理事件,並會在不需要時終止。
首先,請在 manifest.json
檔案中註冊 Service Worker:
{
...
"background": {
"service_worker": "background.js"
},
...
}
建立名為 background.js
的檔案,並新增下列程式碼:
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
服務工作站監聽的第一個事件是 runtime.onInstalled()
。這個方法可讓擴充功能設定初始狀態,或在安裝時完成部分工作。擴充功能可以使用 Storage API 和 IndexedDB 儲存應用程式狀態。但在本例中,由於我們只會處理兩個狀態,因此只會使用動作的徽章文字來追蹤擴充功能是「開啟」或「關閉」。
步驟 3:啟用擴充功能動作
擴充功能動作可控制擴充功能的工具列圖示。因此,每當使用者點擊擴充功能圖示時,就會執行特定程式碼 (如本例所示) 或顯示彈出式視窗。新增以下程式碼,在 manifest.json
檔案中宣告擴充功能動作:
{
...
"action": {
"default_icon": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
},
...
}
使用 ActiveTab 權限保護使用者隱私
activeTab
權限可讓擴充功能「暫時」在使用中的分頁執行程式碼。還可存取目前分頁的敏感屬性。
當使用者叫用擴充功能時,系統就會啟用這項權限。在這種情況下,使用者只要點選擴充功能動作,即可叫用擴充功能。
💡? 哪些使用者互動會為我的擴充功能啟用 Active Tab 權限?
- 按下鍵盤快速鍵組合。
- 選取內容選單項目。
- 接受網址列的建議。
- 正在開啟擴充功能彈出式視窗。
"activeTab"
權限可讓使用者「刻意」選擇在聚焦分頁標籤執行擴充功能,藉此保護使用者隱私。另一個好處是此動作不會觸發權限警告。
如要使用 "activeTab"
權限,請將權限新增至資訊清單的權限陣列:
{
...
"permissions": ["activeTab"],
...
}
步驟 4:追蹤目前分頁的狀態
使用者按一下擴充功能動作後,擴充功能會檢查網址是否與說明文件頁面相符。接著,它會檢查目前分頁的狀態並設定下一個狀態。將下列程式碼新增至 background.js
:
const extensions = 'https://developer.chrome.com/docs/extensions'
const webstore = 'https://developer.chrome.com/docs/webstore'
chrome.action.onClicked.addListener(async (tab) => {
if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
// Retrieve the action badge to check if the extension is 'ON' or 'OFF'
const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
// Next state will always be the opposite
const nextState = prevState === 'ON' ? 'OFF' : 'ON'
// Set the action badge to the next state
await chrome.action.setBadgeText({
tabId: tab.id,
text: nextState,
});
}
});
步驟 5:新增或移除樣式表
下一步是變更頁面的版面配置。建立名為 focus-mode.css
的檔案,並加入以下程式碼:
body > .scaffold > :is(top-nav, navigation-rail, side-nav, footer),
main > :not(:last-child),
main > :last-child > navigation-tree,
main .toc-container {
display: none;
}
main > :last-child {
margin-top: min(10vmax, 10rem);
margin-bottom: min(10vmax, 10rem);
}
使用 Scripting API 插入或移除樣式表。首先,請在資訊清單中宣告 "scripting"
權限:
{
...
"permissions": ["activeTab", "scripting"],
...
}
最後,在 background.js
中加入下列程式碼,以變更網頁的版面配置:
...
if (nextState === "ON") {
// Insert the CSS file when the user turns the extension on
await chrome.scripting.insertCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
} else if (nextState === "OFF") {
// Remove the CSS file when the user turns the extension off
await chrome.scripting.removeCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
}
}
});
💡? 我可以使用 Scripting API 插入程式碼,而不使用樣式表嗎?
可以,您可以使用 scripting.executeScript()
插入 JavaScript。
選用:指派鍵盤快速鍵
如果想要娛樂,不妨新增捷徑,方便啟用或停用專注模式。將 "commands"
鍵新增至資訊清單。
{
...
"commands": {
"_execute_action": {
"suggested_key": {
"default": "Ctrl+B",
"mac": "Command+B"
}
}
}
}
"_execute_action"
鍵會執行與 action.onClicked()
事件相同的程式碼,因此不需要額外的程式碼。
測試是否正常運作
請確認專案的檔案結構如下所示:
在本機載入擴充功能
如要在開發人員模式中載入未封裝的擴充功能,請按照 Hello World 的步驟操作。
在說明文件頁面中測試擴充功能
首先,請開啟下列任一頁面:
接著按一下額外資訊動作。如果你已設定鍵盤快速鍵,可以按下 Ctrl + B
或 Cmd + B
進行測試。
看起來應該是這樣:
變更為:
🎯? 潛在強化
請根據您今天學到的知識,嘗試下列任一操作:
- 改善 CSS 樣式表。
- 指派其他鍵盤快速鍵。
- 變更你喜愛網誌或說明文件網站的版面配置。
繼續拓展社群規模!
恭喜您完成本教學課程 🎉?。完成本系列的其他教學課程,繼續提升您的技能:
延伸 | 學習目標 |
---|---|
閱讀時間 | 如何在一組特定頁自動插入元素。 |
分頁管理員 | 建立管理瀏覽器分頁的彈出式視窗。 |
繼續探索
希望您喜歡這個 Chrome 擴充功能,期待能繼續協助您開發擴充功能。我們建議的學習路徑如下:
- 開發人員指南提供數十種其他說明文件連結,協助您瞭解進階擴充功能建立功能。
- 擴充功能可以存取強大的 API,而不僅止於開放網路提供的 API。Chrome API 說明文件逐一介紹各項 API。