Onion CLI：3秒建项目，10秒出包的Chrome插件开发脚手架神器

Onion CLI：3秒建项目，10秒出包的Chrome插件开发神器

开发者的时间很宝贵，应该花在创造有价值的功能上，而不是在配置文件里打转。

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

配置地狱：从入门到放弃

每次新建Chrome插件项目，面对的都是这样的配置文件大军：

项目结构复杂得像迷宫：
├── manifest.json         # 插件权限配置，一个标点符号错误就GG  
├── babel.config.js       # 兼容性配置，比高数还难懂
├── eslint.config.js      # 代码规范配置，规则多到怀疑人生
├── vue.config.js         # 构建配置，改一行崩全家
├── webpack.config.js     # 打包配置，看着就头疼
└── ...还有更多配置文件   # 我只是想做个插件啊！

新手看到这堆配置文件的心情：我是谁？我在哪？我要干什么？

打包噩梦：每次都是煎熬

传统手动打包流程，每次至少5分钟的"仪式感"：

1. 打开Chrome浏览器（祈祷别卡死）
2. 进入扩展管理页面（找半天入口）
3. 开启开发者模式（总是忘记这一步）
4. 点击"打包扩展程序"（按钮藏得真深）
5. 选择项目文件夹（文件夹太多眼花缭乱）
6. 等待打包完成（时间够泡杯咖啡了）

一天打包10次 = 浪费50分钟！ 这时间够刷好几个短视频了。

开发体验：堪比上世纪

• 没有热更新：改个颜色要重新加载插件，改个文字也要重新加载插件
• 错误定位困难：报错信息比天书还难懂
• 重复性工作太多：复制粘贴配置文件到手抽筋
• 学习成本高：光是搞懂配置就能劝退一批人

---

Onion CLI：让Chrome插件开发变得人性化

设计理念

能自动化的就别手动，能简化的就别复杂，能一键的就别两键

核心特性对比

痛点	传统方式	Onion CLI	心情变化
项目创建	30分钟各种配置	3秒选个模板	从绝望到惊喜
CRX打包	5分钟手动操作	10秒一行命令	从煎熬到爽快
热更新	不存在的	改代码实时看效果	从石器时代到现代
技术栈	自己从零搭建	Vue3全家桶现成的	从抓狂到舒心
模板	白手起家	3种实用模板	从迷茫到清晰

三种贴心模板

模板类型	适用场景	举个栗子
NewTab	新标签页替换	个性化首页、天气插件、每日一句
Sidebar	侧边栏工具	笔记工具、翻译助手、待办清单
Popup	弹窗功能	密码管理、截图工具、快捷搜索

---

30秒上手指南（真的只要30秒）

Step 1: 安装工具

npm install xzx-onion-cli -g

安装时间：喝口水的功夫

Step 2: 创建项目

onion create my-awesome-extension

项目名随便起，反正后面可以改

Step 3: 选择模板（交互式，不用记命令）

选择项目类型

? 你想创建什么类型的项目？
❯ Chrome插件  （就选这个）
  web项目

选择插件模板

? 选择Chrome插件模板
❯ chrome-newtab-template   - 新标签页插件
  chrome-sidebar-template  - 侧边栏插件   
  chrome-popup-template    - popup弹窗插件 

自动下载模板

正在下载模板... （比下载电影快多了）
模板下载完成！
依赖安装完成！
项目创建成功！（可以开香槟了）

Step 4: 启动开发

cd my-awesome-extension
pnpm install  # 或者用npm
pnpm run dev  # 启动开发服务器

开发服务器启动后：

• 本地预览：http://localhost:8888 （可以在浏览器里看效果）
• 插件调试：把 ./dist 目录加载到Chrome （真正的插件环境）

Step 5: 加载到Chrome（比想象中简单）

打开扩展管理页面

方法一：Chrome菜单 → 更多工具 → 扩展程序
方法二：地址栏输入 chrome://extensions/

开启开发者模式 右上角有个开关，点一下就行

加载插件 点击"加载已解压的扩展程序" → 选择项目的 dist 文件夹

享受热更新开发

改代码 → 自动构建 → 插件自动更新 → 浏览器里看效果

这就是传说中的"所见即所得"

Step 6: 一键打包

pnpm run chrome

打包完成后，在 CrxFile/ 目录里找到 .crx 文件，可以直接安装或者上传到Chrome应用商店。

---

技术栈介绍（都是好东西）

现代化全家桶，拿来就能用：

技术	作用	为什么选它
Vue 3	前端框架	简单易学，文档友好，社区活跃
TypeScript	类型检查	写代码有提示，bug少一半
Vite	构建工具	快得飞起，热更新秒级响应
Pinia	状态管理	比Vuex简单，学习成本低
Axios	HTTP请求	老牌网络库，稳定可靠
ESLint	代码检查	统一代码风格，强迫症福音
Prettier	代码格式化	自动美化代码，颜值即正义

---

常见问题解答（踩坑指南）

Q1: 插件装上了但是没权限访问网站

症状：插件功能不工作，控制台报权限错误

病因 ：manifest.json 里权限配置不够

药方：

{
  "permissions": [
    "activeTab",      // 访问当前页面
    "storage",        // 本地存储数据
    "tabs"           // 管理标签页
  ],
  "host_permissions": [
    "https://*/*",    // 所有HTTPS网站
    "http://*/*"      // 所有HTTP网站（现在很少了）
  ]
}

Q2: 改了代码插件没反应

症状：明明改了代码，插件还是老样子

可能原因：

1. 开发服务器没启动（检查 pnpm run dev 是否在运行）
2. Chrome缓存了旧版本（在扩展管理页面点刷新按钮）
3. 代码有语法错误（看看控制台有没有红色报错）

解决方案：重启大法好，不行就重新加载插件

---

参与方式

如果Onion CLI帮你节省了时间，欢迎通过以下方式支持项目：

方式	链接	说明
给个Star	GitHub仓库	免费的支持，但很有意义
反馈问题	Issues页面	发现bug或有建议就提
参与讨论	讨论区	分享使用心得，互相学习
贡献代码	Pull Requests	让工具变得更好用

相关链接

• NPM包地址 : www.npmjs.com/package/xzx...
• 完整文档 : teernage.github.io/onion-cli/
• 示例项目 : github.com/Teernage/on...

---

写在最后

Onion CLI的目标很朴素：

让每个有想法的开发者，都能快速把创意变成Chrome插件，而不是被繁琐的配置和打包流程劝退。

为什么要用Onion CLI？

• 节省时间：从几小时配置到几秒创建，时间就是金钱
• 降低门槛：新手也能快速上手，不用啃一周文档
• 提升效率：专注业务逻辑，而不是环境配置
• 跟上时代：使用最新技术栈，不会过时
• 持续维护：跟随Chrome更新，长期可用

如果你也觉得开发应该更简单、更高效，那就试试Onion CLI吧！

现在就开始你的第一个Chrome插件：

npm install xzx-onion-cli -g
onion create my-first-extension

记住：好的工具应该让开发变得更愉快，而不是更痛苦。