管理分頁

建立第一個分頁管理員。

總覽

本教學課程會建立分頁管理員，以便整理 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" });
  }
});

測試是否正常運作

確認專案的檔案結構與下列目錄樹狀結構相符：

分頁管理員資料夾的內容：manifest.json、pop.js、pop.css、pop.html 和 images 資料夾

在本機載入擴充功能

如要在開發人員模式中載入未封裝的擴充功能，請按照 Hello World 的步驟操作。

開啟幾個說明文件頁面

在不同視窗中開啟以下文件：

按一下彈出式視窗。看起來應該像這樣：

「分頁管理員」擴充功能彈出式視窗
分頁管理員擴充功能彈出式視窗

按一下「建立分頁群組」按鈕。看起來應該像這樣：

分頁管理員已分組的分頁
使用分頁管理員擴充功能將分頁分組

🎯? 潛在強化

請根據您今天學到的知識，嘗試下列任一做法：

  • 自訂彈出式樣式表。
  • 變更分頁群組的顏色和標題。
  • 管理其他說明文件網站的分頁。
  • 支援將已分組的分頁取消分組。

繼續拓展社群規模！

恭喜您完成本教學課程 🎉?。完成本系列的其他教學課程，即可繼續培養技能：

延伸 學習目標
閱讀時間 如何在每個網頁自動插入元素。
專注模式 點選擴充功能動作後，在目前網頁上執行程式碼。

繼續探索

希望您喜歡這個 Chrome 擴充功能，期待能繼續在 Chrome 開發學習旅程中繼續學習。建議您採用下列學習路徑：

  • 開發人員指南提供數十種其他說明文件連結，協助您瞭解進階擴充功能建立功能。
  • 擴充功能可以存取強大的 API，而不僅止於開放網路提供的 API。Chrome API 說明文件逐一介紹各項 API。