建立第一個分頁管理工具。
總覽
本教學課程會建立分頁管理工具,協助您整理 Chrome 擴充功能和 Chrome 線上應用程式商店說明文件分頁。
![分頁管理工具擴充功能彈出式視窗](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-725ac725aaa4d.png?authuser=19&hl=zh-tw)
在本指南中,我們會說明如何完成以下作業:
- 使用 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,因為這些 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()
建立每個項目。 - 用來建立及剖析網址的網址建構函式。
- 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 的步驟操作。
開啟幾個說明文件頁面
在不同視窗中開啟下列文件:
按一下彈出式視窗。看起來應該像這樣:
![分頁管理工具擴充功能彈出式視窗](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-f958d72e1a9ae.png?authuser=19&hl=zh-tw)
按一下「建立分頁群組」按鈕。看起來應該像這樣:
![群組分頁管理工具](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-grouped-tabs-65bdf282bdf98.png?authuser=19&hl=zh-tw)
🎯? 改進空間
請根據您目前學到的內容,嘗試以下列任何一種方式實作:
- 自訂彈出式樣式表。
- 變更分頁群組的顏色和標題。
- 管理其他說明文件網站的分頁。
- 新增取消分組分頁的支援功能。
繼續建構!
恭喜您完成本教學課程 🎉?。完成其他技能 本系列的教學課程:
擴充功能 | 學習目標 |
---|---|
閱讀時間 | 在每個頁面中自動插入元素。 |
專注模式 | 點選擴充功能動作後,在目前頁面執行程式碼。 |
繼續探索
希望您會喜歡建構這個 Chrome 擴充功能,也非常期待能繼續使用您的 Chrome 開發學習旅程建議您按照下列學習路徑操作:
- 開發人員指南提供了數十種說明文件的連結 與進階額外資訊建立流程相關
- 除了開放網路可用的擴充功能,擴充功能也能存取各種強大的 API。 Chrome API 說明文件會逐一介紹各個 API。