Package Exports
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (crx-vue-cli) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Chrome Extension CLI
一个基于vue-cli的Chrome扩展程序开发脚手架
请使用最新版本以保证功能可用
功能
- 项目基于vue-cli，组件化开发更加便利
- 支持Vue2.x以及Vue3.x
- 支持chrome扩展开发过程中的热重载
- 支持开发实时预览
- 一键打包扩展
安装
npm install crx-vue-cli -g使用
crx-vue-cli [options]options选项
--name项目名称--target指定项目创建的地址，默认在当前目录创建项目--default跳过选项，使用默认设置
开发插件
cd your-project-name
npm run serve // 开发模式- 根目录下会生成
dist文件夹 - 打开Chrome浏览器，访问chrome扩展程序管理页面（chrome://extensions/）
- 打开右上角
开发者模式，选择加载已解压的扩展程序，选择项目根目录的dist文件夹即可加载chrome扩展项目 - 现在你就可以愉快地开发并实时预览你的插件了
项目结构
生成的项目结构和通过Vue Cli搭建的结构基本相同。
src是工程目录，按照插件的模块来划分文件夹，具体的含义可以参考底部的《Chrome插件开发全攻略》一文，此处不再赘述。
通过 Vue.prototype.chrome = chrome (Vue2.x) 或者 app.config.globalProperties.chrome = chrome(Vue3.x)将chrome实例作为Vue的全局属性注入，因此你可以很方便的通过this.chrome来调用Chrome插件提供的能力。
Demo
这是一个半成品，一个可以在页面做高亮备注的Marker插件，它基于crx-vue-cli搭建并实现，如果你不知道怎么着手开发插件，那希望这个项目对你有所帮助。
Github地址