jae-jae / chrome-extension-gulu

Chrome 扩展轱辘（脚手架），使用 Vue.js + webpack 来开发和打包Chrome扩展, 支持热重载。

Chrome 扩展轱辘（脚手架）

Chrome 扩展脚手架，使用 Vue.js + webpack 来开发和打包Chrome扩展, 支持热重载。

目录结构

.
├── app --------------------------- Chrome扩展主要文件目录
│   ├── icons --------------------- Chrome扩展图标目录
│   ├── manifest.json ------------- Chrome扩展配置文件
│   └── scripts ------------------- Chrome扩展脚本文件目录
│       ├── background.js --------- background脚本
│       ├── chromereload.js ------- 热重载脚本
│       └── content.js ------------ content脚本
├── build ------------------------- webpack配置目录
├── dist -------------------------- 编译生成后的Chrome扩展文件
├── gulpfile.js ------------------- gulp自动化脚本配置
├── ui ---------------------------- popup和option页面UI

开发

1. 开发Chrome脚本

yarn install
yarn dev

2. 开发UI

$ cd ui
$ yarn install
$ yarn watch

然后使用 Chrome 加载dist目录生成的扩展文件。

编译

yarn build

替换 UI 框架

默认的 UI 框架是使用vue-cli生成的vue.js项目，可以替换为 ReactJs等其它框架，只需要框架编译后的文件生成到dist/ui目录即可，并修改gulpfile.js自动华脚本中的 UI 脚本编译命令即可。