管理标签页

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

概览

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

“标签页管理器”扩展程序弹出式窗口
Tabs Manager 扩展程序

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

  • 使用 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 步：创建弹出式窗口并设置其样式

操作 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() 创建每个项。
  • 用于创建和解析网址的 网址 构造函数。
  • 用于将元素集合转换为 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、popup.js、popup.css、popup.html 和 images 文件夹。

在本地加载扩展程序

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

打开一些文档页面

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

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

“标签页管理器”扩展程序弹出式窗口
“标签页管理器”扩展程序弹出式窗口

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

标签页管理器：已分组的标签页
使用“标签页管理器”扩展程序分组的标签页

🎯 潜在的增强功能

根据您今天所学的内容，尝试实现以下任一操作：

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

继续努力！

恭喜您完成本教程 🎉。继续学习本系列中的其他教程，提升您的技能：

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

继续探索

希望您喜欢构建此 Chrome 扩展程序，并期待您继续学习 Chrome 开发。我们推荐以下学习路线：

  • 开发者指南中还包含数十个链接，指向与高级扩展程序创建相关的文档。
  • 扩展程序可以访问开放网络上无法使用的强大 API。 Chrome API 文档会详细介绍每个 API。