这才是 Vue 驱动的 Chrome 插件工程化正确打开方式

💥 Chrome插件开发的噩梦，你经历过几个？

配置繁琐：从入门到放弃

bash 复制代码

├── manifest.json         #  插件权限配置容易出错  
├── babel.config.js       #  兼容性配置
├── eslint.config.js      #  代码规范配置
├── vue.config.js         #  复杂的构建配置
└── ...还有更多配置文件

打包噩梦：每次都是折磨

手动打包流程：每次至少5分钟！

打开Chrome浏览器 → 2. 进入扩展管理页面 → 3. 开启开发者模式 → 4. 点击"打包扩展程序" → 5. 选择项目文件夹 → 6. 等待打包完成

一天打包10次 = 浪费50分钟！

开发体验差

没有热更新，每次修改都要重新加载插件
错误定位困难，调试效率极低
重复性工作太多，创意被消磨殆尽

🛠️ Onion CLI：让Chrome插件开发变得简单一些

核心想法：能自动化的就别手动了

✨ 核心特性

🚀 3秒创建项目：告别配置地狱
⚡ 一键CRX打包：10秒完成，效率提升30倍
🔥 热更新支持：基于Vite，改代码实时看效果
🎯 Vue3技术栈：会Vue就会做Chrome插件
📦 开箱即用：TypeScript + Pinia + Axios全家桶

🎨 三种实用模板

模板类型	适用场景	示例
NewTab	新标签页替换	浏览器个性化首页、导航工具
Sidebar	侧边栏工具	笔记工具、书签管理
Popup	弹窗功能	密码管理、快捷工具

🚀 30秒极速上手

Step 1: 安装工具

复制代码

npm install xzx-onion-cli -g

Step 2: 创建项目

sql 复制代码

onion create my-first-extension

Step 3: 选择模板

选择项目类型 (使用 ↑↓ 键选择，回车确认)

💡 操作提示 ：使用键盘 ↑ ↓ 方向键上下切换选项，按 回车键 确认选择

选择插件模板

💡 操作提示 ：同样使用 ↑ ↓ 键选择，回车键 确认

拉取模板

Step 4: 启动开发

arduino 复制代码

cd my-first-extension
pnpm install
pnpm run dev

开发服务器启动后：

本地预览：http://localhost:8888
插件调试：加载 ./dist 目录到Chrome

Step 5: 加载到Chrome进行插件开发

打开扩展管理：右上角Chrome菜单 → 扩展程序 → 管理扩展程序

开启开发者模式：右上角开关
加载插件 ：点击"加载已解压的扩展程序" → 选择项目的 dist 文件夹

此时可以看到插件已经加载完成

🔄 开发调试流程：

markdown 复制代码

1. 修改源代码 (src目录)
 ↓
2. Vite自动构建到dist目录
 ↓  
3. Chrome插件自动重新加载
 ↓
4. 在浏览器中测试新功能

💡 调试技巧：

如果插件没有自动重新加载，在扩展管理页面点击插件的"刷新"按钮（如上图）
使用 F12 开发者工具调试插件页面
查看扩展管理页面的"错误"信息排查问题

Step 6: 打包

一键生成CRX文件

arduino 复制代码

pnpm run chrome

打包完成之后，在根目录下的CrxFile文件夹中可以看到打包好的插件

可直接安装或上传到Chrome Web Store

🔍 常见问题解决

Q1: 插件权限配置问题

问题：插件无法访问某些API或网站

解决：检查 manifest.json 中的权限配置

json 复制代码

{
"permissions": [
  "activeTab",
  "storage",
  "tabs"
],
"host_permissions": [
  "https://*/*",
  "http://*/*"
]
}

Q2: 热更新不生效

问题：修改代码后插件没有自动更新

解决：

确保开发服务器正在运行
在Chrome扩展管理页面点击刷新按钮
检查控制台是否有错误信息

Q3: 打包后的CRX文件无法安装

问题：生成的CRX文件在Chrome中无法正常安装

解决：

检查manifest.json格式是否正确
确保所有必需的文件都已包含
验证权限配置是否合理

🎯 技术栈详情

开箱即用的现代化技术栈：

Vue 3 + TypeScript：现代化开发体验
Vite：极速构建和热更新
Pinia：状态管理，比Vuex更简单
Axios：HTTP请求库
Mock：模拟数据，前后端分离开发
ESLint + Prettier：代码质量保证
Husky：Git提交前自动检查

💡 最后的话

Onion CLI的使命很简单：

让你专注于创意和功能实现
把繁琐的配置和打包交给工具
提供足够好的开发体验

如果这个工具帮到了你，欢迎：

⭐ 给项目点个Star
🐛 提交Bug反馈
💡 分享使用心得
🤝 贡献代码改进