mcpField
C
chrome-extension-boilerplate-react-vite

chrome-extension-boilerplate-react-vite

github.com/rebyteai-template开发1794 次安装19 周前更新
代码仓库

关于 chrome-extension-boilerplate-react-vite

用于构建 Chrome 扩展的 React、Vite 和 TypeScript 基础模板，提供开发与构建配置，并说明如何在 Chrome 中加载编译后的扩展。

主要功能

  1. 01React 界面
  2. 02Vite 构建配置
  3. 03TypeScript 支持
  4. 04基于 pnpm 的项目设置

适用场景

  1. 01启动 Chrome 扩展项目
  2. 02使用 React 和 TypeScript 构建扩展

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/rebyteai-template/rebyte-skills --skill chrome-extension-boilerplate-react-vite

安装后在 Claude Code 中输入/chrome-extension-boilerplate-react-vite确认已加载。

详细介绍

Chrome 扩展程序模板

使用 React、Vite 和 TypeScript 构建的 Chrome 扩展程序模板。

技术栈

  • 框架：React
  • 构建工具：Vite
  • 语言：TypeScript
  • 包管理器：pnpm

设置

1. 克隆模板
git clone --depth 1 https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite.git .

如果目录不为空：

git clone --depth 1 https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template
2. 移除 Git 历史记录（可选）
rm -rf .git
git init
3. 安装依赖
pnpm install

构建

pnpm build

开发

pnpm dev

加载扩展程序

  1. 构建扩展程序
  2. 打开 Chrome 并访问 chrome://extensions/
  3. 启用“开发者模式”
  4. 点击“加载已解压的扩展程序”，并选择 dist 文件夹

评论

支持 Markdown