建立第一個分頁管理員。
總覽
本教學課程會建立分頁管理工具，整理 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
- 用於依使用者偏好語言排序索引標籤陣列的 Collator。
- 用來定義可複製的 HTML 元素，而不是使用
document.createElement()建立每個項目的範本標記。 - 用於建立及剖析網址的 URL constructor。
- 擴展語法，用於將元素集轉換為
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」中的步驟操作。
開啟幾個說明文件頁面
在不同視窗中開啟下列文件：
按一下彈出式視窗。內容應該會類似這樣：
按一下「群組分頁」按鈕。內容應該會類似這樣：
🎯 潛在強化功能
根據今天所學，嘗試實作下列任一做法：
- 自訂彈出式視窗 CSS 樣式表。
- 變更分頁群組的顏色和標題。
- 管理其他說明文件網站的分頁。
- 新增取消分組分頁的支援功能。
繼續拓展社群規模！
恭喜完成本教學課程 🎉。請繼續完成本系列的其他教學課程，進一步提升技能：
| 額外資訊 | 學習目標 |
|---|---|
| 閱讀時間 | 如要自動在每個頁面插入元素，請按照下列步驟操作。 |
| 專注模式 | 在點選擴充功能動作後，在目前網頁上執行程式碼。 |
繼續探索
希望您喜歡開發這項 Chrome 擴充功能，並期待繼續學習 Chrome 開發。建議您按照下列學習路徑進行：
- 開發人員指南提供數十個額外連結，可前往與進階擴充功能建立作業相關的說明文件。
- 擴充功能可存取開放網路無法提供的強大 API。Chrome API 說明文件會逐步說明各個 API。