English | 简体中文
- ✨ 通过监控你的src目录下的代码触发编译更新dist代码
- 💥 基于Vite@5.1
- 💫 使用NextUI@2.2
- 🧨 使用Manifest V3.
- 💖 使用TypeScript
- 💥 基于Vite@5.1
git clone git@github.com:newObjectccc/chrome-extension-boilerplate.gitpnpm installpnpm dev
Important
请注意！模板会自动加载你的extension. 当代码更新后，dist代码虽然重新编译了，但是在chrome://extensions界面仍然需要手动刷新插件。
构建时会根据src/manifest.js去生成对应的manifest.json，你可以在vite.config.ts里看到会动态生成content_script，如有需要可以自行配置。
Warning
建议把对应的资源写在对应的目录下。
整个项目结构
src
├── background
├── content
├── popup
├── sidepanel
└── manifest.js 扩展程序清单打包后
dist
├── background 对应插件主线程
├── content 对应插件内容脚本
├── popup 对应插件弹出页面
├── sidepanel 对应插件sidepanel
└── manifest.json 由manifest生成而来Warning
如果你的插件涉及到content_script，浏览器不会让你加载外部包，这里建议修改打包配置并用原生js操作你的视图，如果你确实有非常复杂的视图需求，建议使用iife格式打包，并且通过manualChunks: (id) => string的设置（如果你的项目只涉及一个入口文件，那么可以忽略manualChunks，设置一下format: 'iife'即可，详细设置请参阅vite文档或者rollup文档），把所有的相关依赖打到同一个js bundle文件中，并且在技术选型上建议使用较小的构建产物的框架，如Vue，unocss等， 并且如果你熟悉web component，其实会非常适合做content_script通过注入js来画ui的场景需求。
如果你在做content_script这种需求开发时，想拆分你的模块，以便后续维护，可以参考以下示例的设置：
目录结构如下：
content_script主入口:
// content.js
import { initSelectionListener } from './pageListener';拆分一个js模块: pageLinster.js
把content相关资源打包成一个bundlevite.config.ts:
或者你也可以多个bundle，但如果是多个bundle，建议用shadowDOM做隔离环境，并把每个bundle的导出打包为全局变量，引入时直接引入全局变量。