建立第一個分頁管理員。
總覽
本教學課程會建立分頁管理員,以便整理 Chrome 擴充功能和 Chrome 線上應用程式商店文件分頁。
在本指南中,我們要說明如何執行下列操作:
- 使用 Action API 建立擴充功能彈出式視窗。
- 使用 Tabs API 查詢特定分頁。
- 透過狹窄的主機權限,保障使用者隱私。
- 變更分頁焦點。
- 將分頁移至同一視窗,並分組。
- 使用 TabGroups API 重新命名分頁群組。
事前準備
本指南假設您具有基本的網路開發經驗。建議您查看 Hello World,瞭解擴充功能開發工作流程。
建立擴充功能
首先,請建立名為 tabs-manager
的新目錄,用於存放擴充功能的檔案。如有需要,您可以前往 GitHub 下載完整的原始碼。
步驟 1:新增擴充功能資料和圖示
建立名為 manifest.json
的檔案,並新增下列程式碼:
{
"manifest_version": 3,
"name": "Tab Manager for Chrome Dev Docs",
"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:建立彈出式視窗並設定樣式
Action API 會控制擴充功能動作 (工具列圖示),當使用者點選擴充功能動作時,系統會執行特定程式碼或開啟彈出式視窗 (在本例中為)。首先,請在 manifest.json
中宣告彈出式視窗:
{
"action": {
"default_popup": "popup.html"
}
}
彈出式視窗與網頁相似,但網頁有一個例外:無法執行內嵌 JavaScript。建立 popup.html
檔案並新增下列程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./popup.css" />
</head>
<body>
<template id="li_template">
<li>
<a>
<h3 class="title">Tab Title</h3>
<p class="pathname">Tab Pathname</p>
</a>
</li>
</template>
<h1>Google Dev Docs</h1>
<button>Group Tabs</button>
<ul></ul>
<script src="./popup.js" type="module"></script>
</body>
</html>
接下來,您需要設定彈出式視窗的樣式。建立 popup.css
檔案並新增下列程式碼:
body {
width: 20rem;
}
ul {
list-style-type: none;
padding-inline-start: 0;
margin: 1rem 0;
}
li {
padding: 0.25rem;
}
li:nth-child(odd) {
background: #80808030;
}
li:nth-child(even) {
background: #ffffff;
}
h3,
p {
margin: 0;
}
步驟 3:管理分頁
Tabs API 可讓擴充功能建立、查詢、修改及重新排列瀏覽器中的分頁。
要求權限
Tabs API 中的許多方法都可以在不要求任何權限的情況下使用。不過,我們需要存取分頁的 title
和 URL
;這些敏感屬性需要權限。我們可以要求 "tabs"
權限,但這麼做會授予「所有」分頁上機密屬性的存取權。由於我們只管理特定網站的分頁,因此要求範圍較小的主機權限。
主機權限縮小範圍可讓我們為特定網站授予進階權限,藉此保護使用者隱私。這麼做會授予 title
和 URL
屬性的存取權,以及其他功能。將醒目顯示的程式碼新增至 manifest.json
檔案:
{
"host_permissions": [
"https://developer.chrome.com/*"
]
}
💡? 分頁權限和主機權限的主要差異為何?
"tabs"
權限和主機權限兩者都有缺點。
"tabs"
權限可授權擴充功能讀取所有分頁上的機密資料。長期下來,這類資訊就會用來收集使用者的瀏覽記錄。因此,如果你要求這項權限,Chrome 在安裝時顯示以下警告訊息:
主機權限可讓擴充功能讀取及查詢相符分頁的機密屬性,以及在這些分頁中插入指令碼。使用者會在安裝時看到以下警告訊息:
可能會讓使用者感到擔憂。為獲得更優質的新手上路體驗,建議您導入選用權限。
查詢分頁
您可以使用 tabs.query()
方法從特定網址擷取分頁。請建立 popup.js
檔案並新增下列程式碼:
const tabs = await chrome.tabs.query({
url: [
"https://developer.chrome.com/docs/webstore/*",
"https://developer.chrome.com/docs/extensions/*",
]
});
💡? 我可以直接在彈出式視窗中使用 Chrome API 嗎?
彈出式視窗和其他擴充功能頁面可以呼叫任何 Chrome API,因為這些項目是由 Chrome 結構定義提供。例如 chrome-extension://EXTENSION_ID/popup.html
。
將焦點移至分頁
首先,擴充功能會按照字母順序排序分頁名稱 (內含 HTML 網頁的標題)。接著,點選清單項目後,系統會使用 tabs.update()
聚焦於該分頁,並使用 windows.update()
將視窗置於最前面。將下列程式碼新增至 popup.js
檔案:
...
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));
const template = document.getElementById("li_template");
const elements = new Set();
for (const tab of tabs) {
const element = template.content.firstElementChild.cloneNode(true);
const title = tab.title.split("-")[0].trim();
const pathname = new URL(tab.url).pathname.slice("/docs".length);
element.querySelector(".title").textContent = title;
element.querySelector(".pathname").textContent = pathname;
element.querySelector("a").addEventListener("click", async () => {
// need to focus window as well as the active tab
await chrome.tabs.update(tab.id, { active: true });
await chrome.windows.update(tab.windowId, { focused: true });
});
elements.add(element);
}
document.querySelector("ul").append(...elements);
...
💡? 這個程式碼使用了有趣的 JavaScript
- 用於依據使用者偏好語言排序分頁陣列的衝突器。
- 範本標記可用於定義可複製的 HTML 元素,而不是使用
document.createElement()
建立各個項目。 - 用來建立和剖析網址的網址建構函式。
- Spread 語法,用於將元素集轉換為
append()
呼叫中的引數。
將分頁分組
TabGroups API 可讓擴充功能為群組命名,並選擇背景顏色。新增醒目顯示的程式碼,將 "tabGroups"
權限新增至資訊清單:
{
"permissions": [
"tabGroups"
]
}
在 popup.js
中,加入以下程式碼來建立按鈕,使用 tabs.group()
將所有分頁分組,並移至目前的視窗。
const button = document.querySelector("button");
button.addEventListener("click", async () => {
const tabIds = tabs.map(({ id }) => id);
if (tabIds.length) {
const group = await chrome.tabs.group({ tabIds });
await chrome.tabGroups.update(group, { title: "DOCS" });
}
});
測試是否正常運作
確認專案的檔案結構與下列目錄樹狀結構相符:
在本機載入擴充功能
如要在開發人員模式中載入未封裝的擴充功能,請按照 Hello World 的步驟操作。
開啟幾個說明文件頁面
在不同視窗中開啟以下文件:
按一下彈出式視窗。看起來應該像這樣:
按一下「建立分頁群組」按鈕。看起來應該像這樣:
🎯? 潛在強化
請根據您今天學到的知識,嘗試下列任一做法:
- 自訂彈出式樣式表。
- 變更分頁群組的顏色和標題。
- 管理其他說明文件網站的分頁。
- 支援將已分組的分頁取消分組。
繼續拓展社群規模!
恭喜您完成本教學課程 🎉?。完成本系列的其他教學課程,即可繼續培養技能:
延伸 | 學習目標 |
---|---|
閱讀時間 | 如何在每個網頁自動插入元素。 |
專注模式 | 點選擴充功能動作後,在目前網頁上執行程式碼。 |
繼續探索
希望您喜歡這個 Chrome 擴充功能,期待能繼續在 Chrome 開發學習旅程中繼續學習。建議您採用下列學習路徑:
- 開發人員指南提供數十種其他說明文件連結,協助您瞭解進階擴充功能建立功能。
- 擴充功能可以存取強大的 API,而不僅止於開放網路提供的 API。Chrome API 說明文件逐一介紹各項 API。