此页面由 Cloud Translation API 翻译。

将脚本注入当前标签页中

点击扩展程序工具栏图标，简化当前页面的样式设置。

概览

本教程构建了一个扩展程序，可简化 Chrome 扩展程序和 Chrome 应用商店文档页面的样式设置，使其更便于阅读。

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

将扩展 Service Worker 用作事件协调器。
通过 "activeTab" 权限保护用户隐私。
在用户点击扩展程序工具栏图标时运行代码。
使用 Scripting API 插入和移除样式表。
使用键盘快捷键执行代码。

前期准备

本指南假定您具备基本的 Web 开发经验。建议您查看 Hello World，了解有关扩展程序开发工作流的简介。

构建扩展程序

首先，创建一个名为 focus-mode 的新目录，用于存储该扩展程序的文件。如果您愿意，可以从 GitHub 下载完整的源代码。

第 1 步：添加扩展程序数据和图标

创建一个名为 manifest.json 的文件，并在该文件中添加以下代码。

{
  "manifest_version": 3,
  "name": "Focus Mode",
  "description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
  "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 步：初始化扩展程序

扩展程序可以使用扩展程序的 Service Worker 在后台监控浏览器事件。Service Worker 是特殊的 JavaScript 环境，用于处理事件，并会在不需要时终止。

首先，在 manifest.json 文件中注册 Service Worker：

{
  ...
  "background": {
    "service_worker": "background.js"
  },
  ...
}

创建一个名为 background.js 的文件，并添加以下代码：

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

我们的 Service Worker 将监听的第一个事件是 runtime.onInstalled()。此方法可让扩展程序在安装时设置初始状态或完成一些任务。扩展程序可以使用 Storage API 和 IndexedDB 存储应用状态。不过，在这种情况下，由于我们只处理两种状态，因此将使用操作的标记文本本身来跟踪扩展程序处于“开启”还是“关闭”状态。

第 3 步：启用扩展程序操作

扩展程序操作可控制扩展程序的工具栏图标。因此，只要用户点击该扩展程序图标，它就会运行一些代码（如此示例所示）或显示一个弹出式窗口。添加以下代码，以在 manifest.json 文件中声明扩展程序操作：

{
  ...
  "action": {
    "default_icon": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  },
  ...
}

使用 activeTab 权限保护用户隐私

activeTab 权限授予扩展程序临时在活跃标签页上执行代码的权限。它还允许访问当前标签页的敏感属性。

当用户调用扩展程序时，系统会启用此权限。在这种情况下，用户通过点击扩展程序操作来调用扩展程序。

💡? 还有哪些用户互动会在我自己的扩展程序中实现 ActiveTab 权限？

按键盘快捷键组合。
选择上下文菜单项。
正在接受多功能框中的建议。
正在打开扩展程序弹出式窗口。

"activeTab" 权限可让用户有目的地选择在获得焦点的标签页上运行扩展程序；这样一来，便可以保护用户的隐私。另一个好处是它不会触发权限警告。

如需使用 "activeTab" 权限，请将其添加到清单的权限数组：

{
  ...
  "permissions": ["activeTab"],
  ...
}

第 4 步：跟踪当前标签页的状态

用户点击扩展程序操作后，该扩展程序将检查网址是否与文档页面匹配。接下来，它会检查当前标签页的状态并设置下一个状态。将以下代码添加到 background.js：

const extensions = 'https://developer.chrome.com/docs/extensions'
const webstore = 'https://developer.chrome.com/docs/webstore'

chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
    // Retrieve the action badge to check if the extension is 'ON' or 'OFF'
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    // Next state will always be the opposite
    const nextState = prevState === 'ON' ? 'OFF' : 'ON'

    // Set the action badge to the next state
    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState,
    });
  }
});

第 5 步：添加或移除样式表

现在该更改页面布局了。创建一个名为 focus-mode.css 的文件，并在其中包含以下代码：

body > .scaffold > :is(top-nav, navigation-rail, side-nav, footer),
main > :not(:last-child),
main > :last-child > navigation-tree,
main .toc-container {
  display: none;
}

main > :last-child {
  margin-top: min(10vmax, 10rem);
  margin-bottom: min(10vmax, 10rem);
}

使用 Scripting API 插入或移除样式表。首先，在清单中声明 "scripting" 权限：

{
  ...
  "permissions": ["activeTab", "scripting"],
  ...
}

最后，在 background.js 中添加以下代码，以更改页面布局：

  ...
    if (nextState === "ON") {
      // Insert the CSS file when the user turns the extension on
      await chrome.scripting.insertCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    } else if (nextState === "OFF") {
      // Remove the CSS file when the user turns the extension off
      await chrome.scripting.removeCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    }
  }
});

💡? 我可以使用 Scripting API 而不是样式表来注入代码吗？

是的。您可以使用 scripting.executeScript() 注入 JavaScript。

可选：分配键盘快捷键

单纯是为了好玩，添加一个快捷方式，以便更轻松地启用或停用专注模式。将 "commands" 键添加到清单中。

{
  ...
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+B",
        "mac": "Command+B"
      }
    }
  }
}

"_execute_action" 键运行的代码与 action.onClicked() 事件相同，因此无需其他代码。

测试它是否正常运行

验证项目的文件结构是否如下所示：

“聚焦模式”文件夹的内容：manifest.json、background.js、focus-mode.css 和图片文件夹。

在本地加载扩展程序

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

在文档页面上测试扩展程序

首先，打开以下任一页面：

然后，点击相应扩展程序操作。如果您设置了键盘快捷键，可以通过按 Ctrl + B 或 Cmd + B 进行测试。

它应该由此生成：

更改为：

🎯? 有望改进的方面

根据您今天学到的知识，尝试完成以下任何操作：

改进 CSS 样式表。
指定其他键盘快捷键。
更改您喜爱的博客或文档网站的布局。

继续努力。

恭喜您学完了本教程 🎉?。请继续学习本系列中的其他教程，进一步提升技能：

扩展程序	学习内容
阅读时间	在一组特定网页中自动插入元素。
标签页管理器	创建一个用于管理浏览器标签页的弹出式窗口。

继续探索

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

开发者指南还有数十个额外链接，这些链接指向与创建高级扩展程序相关的文档片段。
扩展程序可以访问除开放 Web 上提供的 API 之外的强大 API。 Chrome API 文档详细介绍了各个 API。