vitesse-webext

知古不知今，谓之落沉。知今不知古，谓之盲瞽。——王充

分享一个由 Vite 提供支持的 WebExtension（Chrome、FireFox 等浏览器插件）的入门模板。

Github：

https://github.com/antfu-collective/vitesse-webext

特性：

• ⚡️ Instant HMR - 在 dev 上使用 Vite（不再刷新！
• 🥝 Vue 3 - 组合式 API、<script 设置> 语法等等！
• 💬 轻松通信 - 由 webext-bridge 和 Vue使用存储提供支持
• 🌈 UnoCSS - 即时按需原子 CSS 引擎。
• 🦾 TypeScript - 类型安全
• 📦 组件自动导入
• 🌟 图标 - 直接从任何图标集中访问图标
• 🖥 内容脚本 - 即使在内容脚本中也可以使用 Vue
• 🌍 WebExtension - Chrome、Firefox 等的同构扩展
• 📃 具有完整类型支持的动态manifest.json

使用模板

GitHub 模板

Create a repo from this template on GitHub.

克隆到本地

如果你更喜欢使用更干净的 git history 手动执行此操作

如果您尚未安装 pnpm，请运行：npm install -g pnpm

npx degit antfu/vitesse-webext my-webext
cd my-webextpnpm i

用法

目录

• src - 主源。
  • contentScript - 要作为 content_script 注入的脚本和组件
  • background - 用于背景的脚本。
  • components - 自动导入的 Vue 组件，在弹出窗口和选项页面中共享。
  • styles - 在 popup 和 options 页面中共享的样式
  • assets - Vue 组件中使用的资源
  • manifest.ts - 扩展的清单。
• extension - 扩展包根目录。
  • assets - 静态资源（主要用于 manifest.json）。
  • dist - 构建的文件，也为 Vite 的开发提供存根条目。
• scripts - 开发和捆绑帮助程序脚本。

开发

pnpm dev

然后在浏览器中加载带有 extension/ 文件夹的扩展。

对于 Firefox 开发人员，您可以运行以下命令：

pnpm dev-firefox

web-ext 会在扩展extension/文件更改时自动重新加载扩展名。

虽然 Vite 在大多数情况下会自动处理 HMR，但仍然建议使用 Extensions Reloader 来更干净地重载。

使用 Gitpod

如果您有 Web 浏览器，则只需单击一下即可获得完全预配置的开发环境：

构建

要构建扩展，请运行

pnpm build

然后将文件打包到 extension 下，您可以将 extension.crx 或 extension.xpi 上传到相应的扩展存储。