Chrome 扩展 - 环境设置

我想在我的浏览器中添加一些愚蠢的功能。也许我可以通过简单的扩展来添加它？虽然不存在，但是自己写应该很容易吧？

这就是我几天前的想法。虽然我没有完全错，但开发过程的某些部分比我预期的要耗时一些。我不会说困难，而是很难使用可用的文档来弄清楚。虽然在developer.chrome.com上对API文档、核心概念等进行了很好的描述，但我想要一种特定的开发体验：

• 具有正确键入 chrome 命名空间的 TypeScript
• 将代码拆分为多个文件并导入/导出必要的内容
• 使用简单的 console.log 和/或调试器调试我的代码
• manifest.json 中的自动补全
• 简单的设置，在我的node_modules中没有任何捆绑程序和一半的互联网
• 在浏览器中更新和测试扩展程序的简单方法

无论好坏，我都设法按照自己的意愿进行设置。在这篇文章中，我将简要解释一般扩展概念并向您展示我如何设置我的开发环境。在接下来的一两篇文章中，我将重点介绍我的简单页面音频扩展的实现细节。

TLDR：
如果您只想要代码，这里是样板存储库：

巫杜教 / chromium 扩展样板

Chrom 扩展样板

此存储库旨在成为开发 chromium 扩展的起点。

它尽可能简约，但带有预先配置：

• manifest.json 的自动补全
• TypeScript 从 ts 文件夹转译到 dist 目录
• chrome 命名空间的类型
• 正常工作导出和导入（使用 VS Code 工作区设置来实现正确的自动导入格式）
• 示例清单.json

编码愉快！

在 GitHub 上查看

ℹ️ 我在下面的所有地方都使用 Windows 11、MS Edge、VS Code 和 npm ℹ️

---

扩展的简要介绍

让我们从一般扩展概念的速成课程开始。

每个扩展都有一个manifest.json 文件，用于定义其名称、版本、所需权限和使用的文件。扩展可以通过多种不同的方式提供功能：

• 通过弹出窗口 - 扩展弹出窗口是当您单击扩展栏中的扩展图标时打开的小窗口，
• 通过内容脚本 - 直接注入网站并具有 DOM 访问权限的脚本，
• 通过后台（服务工作者）脚本 - 脚本在单独的上下文中运行，独立于打开的网站

还有其他方法，但我将在本指南中坚持使用这三种方法。

另一个重要的概念是消息传递。通常，我们需要结合上述方法，因为它们都有不同的局限性。例如，后台脚本不依赖于打开的选项卡，对于持久状态更有用，但无法访问任何网站的 DOM。因此，我们可能需要从后台脚本获取一些扩展范围的数据，使用消息将其传递到内容脚本，并从那里修改网站。

了解一些有关权限的基础知识也很有用。简而言之，如果 manifest.json 未指定正确的权限，某些 API 将无法按预期工作。例如，如果我们不指定“tabs”权限，则从 tabs API 返回的对象将不会有 url 字段。另一方面，我们不应该要求太多的权限 - 如果扩展程序要公开，用户可能会担心授予对太多内容的访问权限。

---

创建一个简单的扩展

灵感来自 https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world

让我们首先使用一个极其简单的扩展来理解我们开发工作流程的核心概念，该扩展仅在弹出窗口中显示一些文本。

文件

首先，我们需要一个manifest.json文件：

// manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

名称、描述、版本和manifest_version可能是不言自明的。 action.default_popup 是单击扩展图标时将呈现的 HTML 文件的路径。 default_icon 是扩展图标的路径。两个路径都相对于manifest.json 位置。

现在，在与manifest.json相同的目录中添加icon.png（例如这个）和hello.html文件。
hello.html 看起来像这样：

<!-- hello.html -->
<p>Hello world</p>

你的整个目录应该是这样的：

// manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

激活扩展

要激活您的扩展程序：

1. 转到edge://extensions/
2. 在左侧边栏中，启用“开发者模式”
   • 可能还需要“允许其他商店的扩展”
3. 在扩展列表上方点击“加载已解压的文件”
4. 选择包含扩展文件的文件夹
5. 您的扩展程序应该出现在列表中，并且其图标出现在扩展程序工具栏中？

现在，单击图标后，它将显示一个带有“Hello world”文本的小弹出窗口。

这涵盖了最重要的基础知识。让我们转向更有趣的事情。

---

页面-音频扩展环境设置

在manifest.json中自动完成

我们将从 manifest.json 和空目录开始。

在编写manifest.json 文件时能够自动完成会很棒，不是吗？幸运的是，它是一个定义明确的标准，并且在 https://json.schemastore.org/chrome-manifest 上有一个 JSON 模式。我们只需要在manifest.json开头的“$schema”键下使用它：

<!-- hello.html -->
<p>Hello world</p>

VS Code 立即开始帮助我们建议字段名称并在缺少必填字段时显示警告。太棒了！？

要使用一些东西来测试我们的设置，请使用manifest.json，如下所示：

.
├── hello.html
├── icon.png
└── manifest.json

• 图标 - 这只是指定扩展图标的不同方式
• 背景部分 - 指定 Service Worker JS 文件的路径及其类型；它是模块，因为代码稍后将使用导出和导入

打字稿

使用 TypeScript...好吧，需要 TypeScript。如果您尚未安装，请从
开始

// manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest"
}

基本配置

为了让事情组织起来，但又不要太复杂，我将 .ts 源文件保留在 ts 目录中。它们将被转译器从那里获取并作为 .js 文件放入 dist 目录中。

这由以下 .tsconfig 描述：

// manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest",
    "name": "Page Audio",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "icons": {
        "16": "icons/logo16x16.png",
        "32": "icons/logo32x32.png",
        "48": "icons/logo48x48.png",
        "128": "icons/logo128x128.png"
    },
    "background": {
        "service_worker": "dist/background.js",
        "type": "module"
    }
}

最重要的位是compiler.rootDir 和compiler.outDir。其他字段可以具有不同的值或完全删除（至少其中一些）。

这是基本配置 - 将一些文件放在 ts 目录中并在根目录中运行 tsc 将在 dist 中创建相应的 .js 文件。然而，我们缺少一个重要的部分 - 我们将使用的 chrome 命名空间的类型。最简单的解决方案是通过 npm 添加它们。

添加镀铬类型

创建一个空的package.json，仅包含括号：

// manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

并在命令行中运行：

<!-- hello.html -->
<p>Hello world</p>

您还可以添加脚本来运行 tsc build 并在监视模式下运行。最终的 package.json 应如下所示：

.
├── hello.html
├── icon.png
└── manifest.json

ℹ️ chrome 类型版本可能会更高。 ℹ️

添加类型后，我们需要让 TypeScript 了解它们。为此，只需更新 .tsconfig.json：

// manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest"
}

测试我们的设置是否正常工作：

1. 在ts文件夹中，创建background.ts文件，内容如下
   

   // manifest.json
   {
       "$schema": "https://json.schemastore.org/chrome-manifest",
       "name": "Page Audio",
       "version": "0.0.0.1",
       "manifest_version": 3,
       "icons": {
           "16": "icons/logo16x16.png",
           "32": "icons/logo32x32.png",
           "48": "icons/logo48x48.png",
           "128": "icons/logo128x128.png"
       },
       "background": {
           "service_worker": "dist/background.js",
           "type": "module"
       }
   }

2. 在命令行中，运行
   

   npm install -g typescript

3. 验证 dist 目录是否已创建并且 background.js 文件是否出现在其中

4. 更改 ts/background.ts 文件中 console.log 字符串中的某些内容并保存

5. 检查是否自动更新了 dist/background.js。

如果有效，那就太棒了！我们几乎一切都准备好了？

您还可以验证您的目录结构是否类似于：

// .tsconfig
{
    "compilerOptions": {
        "target": "ES6",
        "module": "ES6",
        "outDir": "./dist",
        "rootDir": "./ts",
        "strict": true,
    }
}

进出口

正如我所提到的，我想将代码分割成更小的文件。为此，导出和导入必须正确工作。

朝这个方向迈出的一步是将manifest.json 中的service_worker 指定为“type”：“module”。然而，在使用模块时，TypeScript 和 JavaScript 之间有一个区别 - TypeScript 在导入时不需要文件扩展名，而 JavaScript 则需要。例如，这个导入：

// package.json
{
}

在 TS 中可以工作，但 JS 需要

npm i -D chrome-types

了解 TS 转换器 对导入路径不执行任何操作 也很重要。它足够“聪明”，能够理解从 file.js 导入时它还应该查找 file.ts。

结合所有这些，TS 也会对 JS 风格的导入感到满意，并且在从 file.js 导入时将使用相应的 TS 文件。 我们需要做的是确保 TS 文件中的所有导入都具有 .js 扩展名。要在 VS Code 中实现自动化：

1. 按 CTRL , 打开设置
2. 切换到“工作区”选项卡
3. 搜索 typescript.preferences.importModuleSpecifierEnding
4. 将其设置为“.js / .ts”选项

现在，每当您使用 VS Code 自动导入时，它都会将 .js 添加到文件名中？

要测试一切是否正常工作：

1. 使用以下内容创建 ts/hello.ts 文件
   

   // package.json
   {
       "scripts": {
           "build": "tsc",
           "watch": "tsc -w"
       },
       "devDependencies": {
           "chrome-types": "^0.1.327"
       }
   }

2. 在 ts/background.ts 中删除当前的 console.log 行并开始输入“hello”

3. 在您使用 Tab 接受建议后，VS Code 应该自动完成它并添加正确的导入

4. 最后，文件应如下所示：
   

   // manifest.json
   {
     "name": "Hello World",
     "description": "Shows Hello World text",
     "version": "1.0",
     "manifest_version": 3,
     "action": {
       "default_popup": "hello.html",
       "default_icon": "icon.png"
     }
   }

请注意，导入以 .js 扩展名结尾。如果你检查 dist/background.js 扩展也在那里，这就是使一切正常工作的原因。

为了确保我们处于同一阶段，您可以比较目录结构：

<!-- hello.html -->
<p>Hello world</p>

Service Worker 的开发工具

好的，我们有不错的开发经验。我们还添加了一些 console.log 调用...但是现在在哪里可以找到它们？

如果您在内容脚本中添加 console.log，您只需打开开发工具，它们就会在那里，因为内容脚本在与其注入的页面相同的上下文中工作。然而，来自后台脚本的 console.log 被隐藏得更多一些。

1. 打开 edge://extensions/ 并加载您的扩展（如果您尚未这样做）
2. 在列表中找到您的扩展

3. 单击“检查视图”行中的“service worker”链接：

   

4. 应打开一个新的开发工具窗口，您将在其中看到来自 Service Worker 的日志

   • 如果您没有看到日志，请单击“检查视图”下方的“重新加载”

图块底部的三个链接也非常重要

• “重新加载”-刷新整个扩展，包括对manifest.json的更改；查看此表以了解何时可能需要重新加载
• “删除”- 删除扩展
• “详细信息”- 显示有关扩展程序的更多信息，例如其权限
• （可选）“错误” - 如果安装 Service Worker 时出现错误，此链接将出现并带您进入错误列表

唷。这花了一些时间，但最终我们的环境已经设置好了。从现在开始，我们只需

1. 运行 npm run watch （如果你停止了它）
2. 在 ts 目录中写入我们的代码
3. （可选）从扩展选项卡重新加载扩展

我们的扩展将自动更新！ ⚙️

如果您知道如何自动“重新加载”（无需精心设计的黑客攻击），请在评论中告诉我

概括

我们的环境已经准备好了！

• 自动完成在manifest.json中工作，所以我们不必猜测正确的值是什么
• TypeScript 帮助我们正确使用 chrome API
• 代码可以分割成更小的逻辑文件
• 我们在ts文件夹中编写的代码会自动更新
• 我们知道在哪里可以找到服务工作者和内容脚本的开发工具

在下一部分中，我将描述我的小型“页面音频”扩展的实现细节。

感谢您的阅读！

以上是Chrome 扩展 - 环境设置的详细内容。更多信息请关注PHP中文网其他相关文章！