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

不一样的少年_
332 阅读5分钟

你是不是也曾被开发 Chrome 插件的各种配置、打包、调试折磨到怀疑人生？

作为一名前端开发者，我深有体会———于是开发了 Onion CLI脚手架， 它能一键帮你生成 Vue 驱动的插件项目模板，配置啥的都自动安排好，你只管愉快地写功能，剩下的锅都让脚手架背吧！

摘要

Onion CLI —— 快速拥有 Vue3+Vite+TS 驱动的 Chrome 插件工程，配置自动化，开发体验拉满！

读完本文，你将收获：

  • 快速创建一个可运行的 MV3 浏览器插件工程
  • 具备 popup / content / background(service worker) 基础结构与通信示例
  • 开发阶段实现 UI 热更新
  • 一键生成 CRX 安装包

你将学会如何用 Onion CLI 快速搭建、开发、调试并扩展你的浏览器插件项目。

为什么选择 Onion CLI？

传统方式开发 Chrome 插件，你可能经历：

  • 配置地狱：manifest.json / 目录结构 / 内容脚本注入策略 / 打包差异
  • 开发体验差：没有热更新，每次修改都得重新加载插件，调试效率极低
  • 打包繁琐：传统打包流程如下图

手动打包每次至少5分钟，一天打包10次等于浪费50分钟！

  • 代码分散：popup / options / background / content 分散且缺少统一工程化
  • 缺少类型能力：TS + 规范 + 提交校验需要自己拼
  • MV3 迁移痛点：background page → service worker、权限精简、动态导入限制

结果：花大量时间“搭架子”，而不是“做功能”。

Onion CLI 核心优势

Onion CLI 让你从“我还在搭架子、反复打包、手动刷新”变成“我已经开始写功能了”。

一句话：配置的锅、打包的累、调试的烦，全让它扛，你只管愉快写代码。

全流程如下图：

只需一条命令，即可生成现代化技术栈的 Chrome 插件项目：

  • Vue 3 + TypeScript

  • Vite 极速构建与热更新

  • 一键 CRX 打包

开发调试、打包只需两条指令：

  • 开发调试：pnpm run dev
  • 打包发布：pnpm run chrome

三种实用插件模板

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

🚀 30秒极速上手

Step 1: 安装onion cli脚手架

npm install xzx-onion-cli -g

Step 2: 使用onion cli脚手架创建chrome插件项目

onion create my-first-extension

Step 3: 选择插件模板

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

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

  1. 选择插件模板

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

  1. 自动拉取模板，秒级创建项目

Step 4: 启动开发

cd my-first-extension
pnpm install
pnpm run dev

开发服务器启动后：

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

  1. 打开扩展管理：右上角Chrome菜单 → 扩展程序 → 管理扩展程序
  1. 开启开发者模式：右上角开关
  2. 加载插件：点击"加载已解压的扩展程序" → 选择项目的 dist 文件夹

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

开发调试流程：

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

💡 调试技巧：

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

Step 6: 一键打包 CRX

一键生成CRX文件

pnpm run chrome
  • 打包后的 CRX 文件位于项目根目录 CrxFile 文件夹

🔍 常见问题解决

Q1: 插件权限配置问题

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

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

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

Q2: 热更新不生效

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

解决：

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

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

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

解决：

  1. 检查manifest.json格式是否正确

  2. 确保所有必需的文件都已包含

  3. 验证权限配置是否合理

🎯 技术栈详情

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

  • Vue 3 + TypeScript：现代化开发体验

  • Vite：极速构建和热更新

  • Pinia：状态管理，比Vuex更简单

  • Axios：HTTP请求库

  • Mock：模拟数据，前后端分离开发

  • ESLint + Prettier：代码质量保证

  • Husky：Git提交前自动检查

💡 最后的话

Onion CLI的使命很简单：

  • 让你专注于创意和功能实现

  • 把繁琐的配置和打包交给工具

  • 提供足够好的开发体验

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

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

如果你也有这样的想法，那我们就是同路人了 😊

本文首发于掘金，转载请注明出处

avatar
文章
阅读
粉丝