ITADN · 发现全球开源项目

此模板具有 Legacy 版本

[!NOTE] 本项目收录于 Awesome Vite

[!TIP] 在所有页面之间共享存储状态

https://github.com/user-attachments/assets/3b8e189f-6443-490e-a455-4f9570267f8c

简介

此模板帮助你使用 React 和 Typescript 创建 Chrome/Firefox 扩展。它通过使用 Vite 和 Turborepo 来提升构建速度和开发体验。

特性

安装

Clone this repository.( git clone https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite )
Ensure your node version is >= than in .nvmrc file, recommend to use nvm
Edit /packages/i18n/locales/{your locale(s)}/messages.json
In the objects extensionDescription and extensionName, change the message fields (leave description alone)
Install pnpm globally: npm install -g pnpm
Run pnpm install
Check if you have that configuration in your IDE/Editor:
- VS Code:
  - Installed ESLint extension
  - Installed Prettier extension
  - Enabled Typescript Workbench version in settings:
    - CTRL + SHIFT + P -> Search: Typescript: Select Typescript version... -> Use Workbench version
    - Read more
  - Optional, for imports to work correctly in WSL, you might need to install the Remote - WSL extension and connect to WSL remotely from VS Code. See overview section in the extension page for more information.
- WebStorm:
  - Configured ESLint
  - Configured Prettier
  - Optional, but useful File | Settings | Tools | Actions on Save
    -> Optimize imports and Reformat code
Run pnpm update-version <version> for change the version to the desired version of your extension.

[!IMPORTANT] 在 Windows 上，请确保已启用 WSL 并在 WSL 中安装了 Linux 发行版（例如 Ubuntu）。

安装指南

然后，根据目标浏览器：

适用于 Chrome：

Run:
- Dev: pnpm dev (on Windows, you should run as administrator; see issue#456)
- Prod: pnpm build
Open in browser - chrome://extensions
Check - Developer mode
Click - Load unpacked in the upper left corner
Select the dist directory from the boilerplate project

适用于 Firefox：

Run:
- Dev: pnpm dev:firefox
- Prod: pnpm build:firefox
Open in browser - about:debugging#/runtime/this-firefox
Click - Load Temporary Add-on... in the upper right corner
Select the ./dist/manifest.json file from the boilerplate project

[!NOTE] 在 Firefox 中，你以临时模式加载附加组件。这意味着每次关闭浏览器后它们都会消失。你必须在每次启动浏览器时加载该附加组件。

安装 turborepo 的依赖项：

对于 root：

运行 pnpm i <package> -w

对于模块：

运行 pnpm i <package> -F <module name>

package - 要安装的包名称，例如 nodemon
module-name - 您可以在每个 package.json 中通过键 name 找到它，例如 @extension/content-script，您可以仅使用 content-script 而不带 @extension/ 前缀

如何禁用我未使用的模块？

在此阅读

环境变量

阅读：Env 文档

样板结构

Chrome 扩展

该扩展位于 chrome-extension 目录中，并包含以下文件：

manifest.ts - 输出 manifest.json 的脚本
src/background - background script (manifest.json 中的 background.service_worker)
public - manifest 中引用的图标；用于用户页面注入的内容 CSS

[!IMPORTANT] 为了方便开发，该模板被配置为“读取并更改你在所有网站上的所有数据”。在生产环境中，最佳实践是将权限限制为仅严格必要的网站。请参阅声明权限并相应地编辑 manifest.js。

页面

被转译以成为扩展一部分的代码位于 pages 目录中。

content - 注入到指定页面的脚本（你可以在控制台中看到它）
content-ui - 注入到指定页面的 React 组件（你可以在页面最底部看到它）
content-runtime - 注入的内容脚本这可以从例如 popup 像标准的 content 一样注入
devtools - 扩展浏览器 DevTools （manifest.json 中的 devtools_page）
devtools-panel - DevTools 面板用于 devtools
new-tab - 覆盖默认的新标签页页面（manifest.json 中的 chrome_url_overrides.newtab）
options - 选项页面（manifest.json 中的 options_page）
popup - 点击工具栏中的扩展时显示的弹出窗口（manifest.json 中的 action.default_popup）
side-panel - 侧边栏（Chrome 114+）（manifest.json 中的 side_panel.default_path）

包

一些共享包：

dev-utils - Chrome 扩展开发工具（manifest-parser、logger）
env - 导出包含 .env 中所有环境变量及动态声明变量的对象
hmr - Vite 的自定义 HMR 插件，用于重载/刷新的注入脚本，HMR 开发服务器
i18n - 自定义国际化包；提供具有类型安全和其他验证的 i18n 函数
shared - 整个项目共享的代码（类型、常量、自定义 hooks、组件等）
storage - 便于与 storage 集成的辅助工具，例如本地/会话存储
tailwind-config - 整个项目共享的 Tailwind 配置
tsconfig - 整个项目共享的 tsconfig
ui - 将您的 Tailwind 配置与全局配置合并的函数；您可以在此处保存组件
vite-config - 整个项目共享的 Vite 配置

其他有用的包：

zipper - 运行 pnpm zip 将 dist 文件夹打包到新建的 dist-zip 内的 extension-YYYYMMDD-HHmmss.zip
module-manager - 运行 pnpm module-manager 以启用/禁用模块
e2e - 运行 pnpm e2e 在不同浏览器上对您的压缩扩展进行端到端测试