我想在我的浏览器中添加一些愚蠢的功能。也许我可以通过简单的扩展来添加它？虽然不存在，但是自己写应该很容易吧？
这就是我几天前的想法。虽然我没有完全错，但开发过程的某些部分比我预期的要耗时一些。我不会说困难，而是很难使用可用的文档来弄清楚。虽然在developer.chrome.com上对API文档、核心概念等进行了很好的描述，但我想要一种特定的开发体验：
无论好坏，我都设法按照自己的意愿进行设置。在这篇文章中，我将简要解释一般扩展概念并向您展示我如何设置我的开发环境。在接下来的一两篇文章中，我将重点介绍我的简单页面音频扩展的实现细节。
TLDR：
如果您只想要代码，这里是样板存储库：
巫杜教
/
chromium 扩展样板
此存储库旨在成为开发 chromium 扩展的起点。
它尽可能简约，但带有预先配置：
编码愉快！
ℹ️ 我在下面的所有地方都使用 Windows 11、MS Edge、VS Code 和 npm ℹ️
让我们从一般扩展概念的速成课程开始。
每个扩展都有一个manifest.json 文件，用于定义其名称、版本、所需权限和使用的文件。扩展可以通过多种不同的方式提供功能：
还有其他方法，但我将在本指南中坚持使用这三种方法。
另一个重要的概念是消息传递。通常，我们需要结合上述方法，因为它们都有不同的局限性。例如，后台脚本不依赖于打开的选项卡，对于持久状态更有用，但无法访问任何网站的 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"
}
}
要激活您的扩展程序：
现在，单击图标后，它将显示一个带有“Hello world”文本的小弹出窗口。
这涵盖了最重要的基础知识。让我们转向更有趣的事情。
我们将从 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
使用 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"
}
测试我们的设置是否正常工作：
在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"
}
}
在命令行中，运行
npm install -g typescript
验证 dist 目录是否已创建并且 background.js 文件是否出现在其中
更改 ts/background.ts 文件中 console.log 字符串中的某些内容并保存
检查是否自动更新了 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 中实现自动化：
现在，每当您使用 VS Code 自动导入时，它都会将 .js 添加到文件名中？
要测试一切是否正常工作：
使用以下内容创建 ts/hello.ts 文件
// package.json
{
"scripts": {
"build": "tsc",
"watch": "tsc -w"
},
"devDependencies": {
"chrome-types": "^0.1.327"
}
}
在 ts/background.ts 中删除当前的 console.log 行并开始输入“hello”
在您使用 Tab 接受建议后，VS Code 应该自动完成它并添加正确的导入
最后，文件应如下所示：
// 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>
好的，我们有不错的开发经验。我们还添加了一些 console.log 调用...但是现在在哪里可以找到它们？
如果您在内容脚本中添加 console.log，您只需打开开发工具，它们就会在那里，因为内容脚本在与其注入的页面相同的上下文中工作。然而，来自后台脚本的 console.log 被隐藏得更多一些。
单击“检查视图”行中的“service worker”链接：
应打开一个新的开发工具窗口，您将在其中看到来自 Service Worker 的日志
图块底部的三个链接也非常重要
唷。这花了一些时间，但最终我们的环境已经设置好了。从现在开始，我们只需
我们的扩展将自动更新！ ⚙️
如果您知道如何自动“重新加载”（无需精心设计的黑客攻击），请在评论中告诉我
我们的环境已经准备好了！
在下一部分中，我将描述我的小型“页面音频”扩展的实现细节。
感谢您的阅读！
以上是Chrome 扩展 - 环境设置的详细内容。更多信息请关注PHP中文网其他相关文章！
