管理分頁

建立第一個分頁管理工具。

總覽

本教學課程會建立分頁管理工具，協助您整理 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，因為這些 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" });
  }
});

測試是否能正常運作

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

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

在本機載入擴充功能

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

開啟幾個說明文件頁面

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

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

分頁管理工具擴充功能彈出式視窗
分頁管理工具擴充功能彈出式視窗

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

群組分頁管理工具
使用分頁管理員擴充功能將分頁分組

🎯? 改進空間

請根據您目前學到的內容，嘗試以下列任何一種方式實作：

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

繼續建構！

恭喜您完成本教學課程 🎉?。完成其他技能 本系列的教學課程：

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

繼續探索

希望您會喜歡建構這個 Chrome 擴充功能，也非常期待能繼續使用您的 Chrome 開發學習旅程建議您按照下列學習路徑操作：

  • 開發人員指南提供了數十種說明文件的連結 與進階額外資訊建立流程相關
  • 除了開放網路可用的擴充功能，擴充功能也能存取各種強大的 API。 Chrome API 說明文件會逐一介紹各個 API。