此页面由 Cloud Translation API 翻译。

管理标签页

构建您的第一个标签页管理器。

概览

本教程将构建一个标签页管理器，用于整理 Chrome 扩展程序和 Chrome 应用商店文档中的标签页。

在本指南中，我们将介绍如何执行以下操作：

使用 Action API 创建扩展程序弹出式窗口。
使用 Tabs API 查询特定标签页。
通过狭窄的主机权限保护用户隐私。
更改标签页的焦点。
将标签页移至同一窗口并对其进行分组。
使用 TabGroups API 重命名标签页分组。

前期准备

本指南假定您具备基本的 Web 开发经验。建议您查看 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>

提示：您可以通过向脚本添加 type="module" 来使用顶级 await 标记。

接下来，您将设置弹出式窗口的样式。创建一个 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 权限警告对话框

借助主机权限，扩展程序可以读取和查询匹配标签页的敏感属性，并在这些标签页上注入脚本。用户在安装时会看到以下警告消息：

主机权限警告对话框

此类警告可能会让用户感到警惕。为了获得更好的新手入门体验，我们建议您实现可选权限。

查询标签页

您可以使用 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() 来创建每一项。
用于创建和解析网址的网址构造函数。
用于在 append() 调用中将元素集转换为参数的 Spread 语法。

为标签页分组

TabGroups API 允许此扩展程序为组命名并选择背景 color 决定。通过添加突出显示的代码，将 "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、Popp.js、pops.css、pops.html 和 images 文件夹。

在本地加载扩展程序

如需在开发者模式下加载已解压的扩展程序，请按照 Hello World 中的步骤操作。

打开一些文档页面

在不同窗口中打开以下文档：

点击弹出式窗口。它应如下所示：

点击“将标签页分组”按钮。它应如下所示：

🎯? 提升潜力

根据您今天学到的知识，请尝试实现以下任一操作：

自定义弹出式样式表。
更改标签页分组的颜色和标题。
管理其他文档网站的标签页。
添加了对取消分组标签页的支持。

继续努力！

恭喜您学完本教程 🎉?。通过完成其他课程，本系列教程：

扩展程序	学习内容
阅读时间	在每个页面上自动插入元素。
专注模式	点击扩展程序操作后在当前网页上运行代码。

继续探索

我们希望您喜欢构建这个 Chrome 扩展程序，也很高兴能继续开发您的 Chrome 学习之旅。我们建议您遵循以下学习路线：

开发者指南中提供了数十个其他指向相关文档的链接与创建高级附加信息相关的重要问题。
扩展程序可以访问开放 Web 所没有的强大 API。 Chrome API 文档详细介绍了各个 API。