chrome-extension-boilerplate

基于 React18，TypeScript，Vite，NextUI 的 Manifest Version 3 的谷歌浏览器插件开发木板

English | 简体中文

功能

• ✨ 通过监控你的src目录下的代码触发编译更新dist代码
• 💥 基于Vite@5.1
• 💫 使用NextUI@2.2
• 🧨 使用Manifest V3.
• 💖 使用TypeScript
• 💥 基于Vite@5.1

使用说明

1. git clone git@github.com:newObjectccc/chrome-extension-boilerplate.git
2. pnpm install
3. pnpm 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的导出打包为全局变量，引入时直接引入全局变量。

参考文档

Chrome开发文档