首页 >web前端 >js教程 >使用 Vite TS 创建浏览器扩展

使用 Vite TS 创建浏览器扩展

DDD原创: 2024-11-16 01:28:02692浏览

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

{
  "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文件中的代码复制到其中。
Create Browser Extension with Vite TS
您很快就会注意到 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

安装

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

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

简单的 vite 扩展

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

JavaScript typescript json chrome html Object if switch for while select catch Directory using public finally copy delete JS function default this background transform input ui issue everything

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Why does iterating through `getElementsByClassName` require special attention?下一篇：How Can I Pass a Variable Number of Arguments to JavaScript Functions?

查看更多