点点阅读app正版
24.91MB · 2025-10-31
每次新建Chrome插件项目，面对的都是这样的配置文件大军：
项目结构复杂得像迷宫：
├── manifest.json # 插件权限配置，一个标点符号错误就GG
├── babel.config.js # 兼容性配置，比高数还难懂
├── eslint.config.js # 代码规范配置，规则多到怀疑人生
├── vue.config.js # 构建配置，改一行崩全家
├── webpack.config.js # 打包配置，看着就头疼
└── ...还有更多配置文件 # 我只是想做个插件啊！
新手看到这堆配置文件的心情：我是谁？我在哪？我要干什么？
传统手动打包流程，每次至少5分钟的"仪式感"：
一天打包10次 = 浪费50分钟！ 这时间够刷好几个短视频了。
| 痛点 | 传统方式 | Onion CLI | 心情变化 |
|---|---|---|---|
| 项目创建 | 30分钟各种配置 | 3秒选个模板 | 从绝望到惊喜 |
| CRX打包 | 5分钟手动操作 | 10秒一行命令 | 从煎熬到爽快 |
| 热更新 | 不存在的 | 改代码实时看效果 | 从石器时代到现代 |
| 技术栈 | 自己从零搭建 | Vue3全家桶现成的 | 从抓狂到舒心 |
| 模板 | 白手起家 | 3种实用模板 | 从迷茫到清晰 |
| 模板类型 | 适用场景 | 举个栗子 |
|---|---|---|
| NewTab | 新标签页替换 | 个性化首页、天气插件、每日一句 |
| Sidebar | 侧边栏工具 | 笔记工具、翻译助手、待办清单 |
| Popup | 弹窗功能 | 密码管理、截图工具、快捷搜索 |
npm install xzx-onion-cli -g
安装时间：喝口水的功夫
onion create my-awesome-extension
项目名随便起，反正后面可以改
选择项目类型
? 你想创建什么类型的项目？
❯ Chrome插件 （就选这个）
web项目
选择插件模板
? 选择Chrome插件模板
❯ chrome-newtab-template - 新标签页插件
chrome-sidebar-template - 侧边栏插件
chrome-popup-template - popup弹窗插件
自动下载模板
正在下载模板... （比下载电影快多了）
模板下载完成！
依赖安装完成！
项目创建成功！（可以开香槟了）
cd my-awesome-extension
pnpm install # 或者用npm
pnpm run dev # 启动开发服务器
开发服务器启动后：
./dist 目录加载到Chrome （真正的插件环境）打开扩展管理页面
方法一：Chrome菜单 → 更多工具 → 扩展程序
方法二：地址栏输入 chrome://extensions/
开启开发者模式 右上角有个开关，点一下就行
加载插件
点击"加载已解压的扩展程序" → 选择项目的 dist 文件夹
享受热更新开发
改代码 → 自动构建 → 插件自动更新 → 浏览器里看效果
这就是传说中的"所见即所得"
pnpm run chrome
打包完成后，在 CrxFile/ 目录里找到 .crx 文件，可以直接安装或者上传到Chrome应用商店。
现代化全家桶，拿来就能用：
| 技术 | 作用 | 为什么选它 |
|---|---|---|
| Vue 3 | 前端框架 | 简单易学，文档友好，社区活跃 |
| TypeScript | 类型检查 | 写代码有提示，bug少一半 |
| Vite | 构建工具 | 快得飞起，热更新秒级响应 |
| Pinia | 状态管理 | 比Vuex简单，学习成本低 |
| Axios | HTTP请求 | 老牌网络库，稳定可靠 |
| ESLint | 代码检查 | 统一代码风格，强迫症福音 |
| Prettier | 代码格式化 | 自动美化代码，颜值即正义 |
症状：插件功能不工作，控制台报权限错误
病因：manifest.json 里权限配置不够
药方：
{
"permissions": [
"activeTab", // 访问当前页面
"storage", // 本地存储数据
"tabs" // 管理标签页
],
"host_permissions": [
"https://***/**", // 所有HTTPS网站
"http://***/**" // 所有HTTP网站（现在很少了）
]
}
症状：明明改了代码，插件还是老样子
可能原因：
pnpm run dev 是否在运行）解决方案：重启大法好，不行就重新加载插件
如果Onion CLI帮你节省了时间，欢迎通过以下方式支持项目：
| 方式 | 链接 | 说明 |
|---|---|---|
| 给个Star | GitHub仓库 | 免费的支持，但很有意义 |
| 反馈问题 | Issues页面 | 发现bug或有建议就提 |
| 参与讨论 | 讨论区 | 分享使用心得，互相学习 |
| 贡献代码 | Pull Requests | 让工具变得更好用 |
Onion CLI的目标很朴素：
让每个有想法的开发者，都能快速把创意变成Chrome插件，而不是被繁琐的配置和打包流程劝退。
如果你也觉得开发应该更简单、更高效，那就试试Onion CLI吧！
现在就开始你的第一个Chrome插件：
npm install xzx-onion-cli -g
onion create my-first-extension
记住：好的工具应该让开发变得更愉快，而不是更痛苦。
