使用 Vite TS 创建浏览器扩展

让我们开始这个练习，重点是设置最基本的扩展结构，其中只包含一个清单文件和一个服务工作者。清单充当配置文件，指定允许扩展执行的操作，而服务工作线程处理后台任务，主要响应浏览器事件，在本例中，它会在安装扩展时记录日志。

{
  "name": "Simple",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

manifest.json

console.log("Initialized background script!");

chrome.runtime.onInstalled.addListener((object) => {
  console.log("Installed background script!");
});

background.js

Service Worker 可以根据需要变得复杂，但我们暂时保持简单，因为此任务的目标是将这个简单的两个文件扩展转换为 Vite 项目。

那为什么要使用Vite呢？主要是因为我决定使用 TypeScript，这将显着提高代码质量、可维护性和生产力。除了提供自我文档之外，TypeScript 还允许我在编译时而不是运行时捕获与类型相关的错误，从而增强整体开发体验。

维特

虽然带有 TypeScript 的 Node 项目足以将我的 TS 代码编译成我的扩展所需的普通 JavaScript，但我选择了 Vite。 Vite，特别是其 Rollup 捆绑器，提供了广泛的功能，例如树摇动和捆绑缩小。此外，如果我决定将来为扩展创建 UI 组件，Vite 强大的插件生态系统将使我能够轻松集成 React。

考虑到这一点，让我们开始使用其 vanilla-ts 模板创建 Vite 项目。

npm create vite@latest simple-extension -- --template vanilla-ts

运行命令并安装依赖项后，您将拥有一个使用 TypeScript 设置的小型 Web 项目。但是，由于此设置并不完全符合我们的需要，因此我们将从一些清理开始。首先，从根文件夹中删除 index.html 文件，因为它不再需要了。然后，删除 src 文件夹中除 vite-env.d.ts 之外的所有文件，该文件为 Vite 特定功能提供类型定义。最后，删除公用文件夹中的所有内容。

⚠️ 如果您在 tsconfig 文件中遇到有关未知编译器选项的错误，请确保您的编辑器使用为项目安装的相同 TypeScript 版本。

接下来，在src文件夹中创建一个名为background.ts的新文件，并将原始background.js文件中的代码复制到其中。

您很快就会注意到 TypeScript 需要额外的上下文才能正常运行，因为如果没有适当的类型，它无法识别 chrome 对象。要解决此问题，请安装 @types/chrome 为 chrome 提供必要的类型定义。

{
  "name": "Simple",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

安装后，TypeScript 错误就会消失。但是，您可能会注意到 onInstalled 回调中出现一条警告消息。这是由于 Vite 在 TypeScript 设置中为我们配置了 linting 属性。

console.log("Initialized background script!");

chrome.runtime.onInstalled.addListener((object) => {
  console.log("Installed background script!");
});

tsconfig.json

由于我们定义了一个未使用的对象，所以让我们继续删除它。这应该就是我们所需要的，所以现在我们可以编译项目了。

npm create vite@latest simple-extension -- --template vanilla-ts

似乎有一个问题——默认的 Vite 配置仍在尝试使用我们刚刚删除的一些文件作为代码入口点。

npm i -D @types/chrome

我们需要自定义 Vite 配置以在库模式下运行。这是该项目所需的最低配置。

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true

vite.config.ts

在上面的配置中，我们只是将项目的输入设置为 ./src/background.ts 并将输出文件名调整为 [name].js。默认情况下，Vite 会在生产版本的文件名中附加一个哈希值（例如，background-[hash].js），但我们需要一个精确的文件名匹配，manifest.json 才能正常工作。

说到manifest.json，它应该位于哪里？这部分很简单：任何应按原样复制（无需转换）到输出文件夹的文件都应放置在公用文件夹中。现在，如果我们再次构建项目，我们将在 dist 文件夹中找到编译的两个文件浏览器扩展。

npm run build

安装

现在让我们验证一切是否按预期工作。如果您之前没有在本地测试过浏览器扩展，只需按照以下简单步骤操作：

1. 在新选项卡中输入 chrome://extensions 打开扩展页面。
2. 通过切换开发者模式开关启用开发者模式。
3. 点击加载解压后的，选择扩展目录，即Vite生成的dist文件夹。 就是这样！扩展现已安装。如果您单击 Service Worker 链接，该 Service Worker 的 DevTools 将打开，您可以在其中查看我们的 Worker 运行时生成的日志。

简单的 vite 扩展

以上是使用 Vite TS 创建浏览器扩展的详细内容。更多信息请关注PHP中文网其他相关文章！