此页面由 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 步：初始化扩展程序

扩展程序可以使用扩展程序的服务在后台监控浏览器事件 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 用于存储应用状态。但在本例中，由于我们只处理两种状态，因此我们将根据“操作的标志”文字本身来跟踪附加信息是否处于“启用”状态。或“OFF”。

第 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 权限可授予扩展程序临时执行代码的权限。它还允许访问以下内容的敏感属性：当前标签页

系统会在用户调用扩展程序时启用此权限。在这种情况下，用户调用附加信息。

💡? 还有哪些用户互动可以在我自己的扩展程序中启用 activityTab 权限？

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

"activeTab" 权限可让用户故意选择在聚焦标签页；从而保护用户的隐私另一个好处是就会触发权限警告。

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

{
  ...
  "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 的文件，并在其中包含以下代码：

* {
  display: none !important;
}

html,
body,
*:has(article),
article,
article * {
  display: revert !important;
}

[role='navigation'] {
  display: none !important;
}

article {
  margin: auto;
  max-width: 700px;
}

使用 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 和 images 文件夹。

在本地加载扩展程序

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

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

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

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

它应从以下内容开始：

更改为：

🎯? 提升潜力

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

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

继续努力。

恭喜您学完本教程 🎉?。通过完成其他课程来继续提升技能本系列教程：

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

继续探索

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

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