1.获取安装包:考虑到网络原因,部分同学无法实现在线安装,这种情况下可以直接通过离线安装的方法来解决。 这里已经把安装包下载好了 点击下方公众号,回复关键字:chrome获取Vue.js Devtools插件安装包。 2.安装包下载好后,打开chrome浏览器的扩展程序界面...
在你的Vue项目中,运行以下命令来构建插件: ```bash vue-cli-service build ``` 这将会在`chrome-extension-vue-example`目录下生成构建好的插件文件。将`chrome-extension-vue-example`目录作为你的Chrome插件的根目录,加载插件到Chrome浏览器中。 项目源码:https://github.com/ordersheet/chrome-extension/tree/ma...
开发Chrome插件只需要会HTML,Javascript,CSS就可以动手开发了。 2. 基础概念 2.1 基本原理 下面这张图很好的可以理解Chrome插件的原理。 2.2 文件的目录 │ manifest.json ├─html │ index.html ├─images │icon-128.png │icon-48.png │icon-16.png ├─scripts │background.js ├─styles │main.css ...
选择完后,将会自动下载依赖,通过npm run server将会在根目录生成dist文件夹,将该文件拖至Chrome插件管理便可安装,由于使用了webpack,所以更改代码将会热更新,不用反复的编译导入。 项目结构 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34...
vue默认的入口文件名是index.html,这里依照chrome插件的习惯将其修改为popup.html resolve:{alias:{'@':fileURLToPath(newURL('./src/popup', import.meta.url))}}, build:{rollupOptions:{input:{main:'./popup.html'},}} jsconfig.json {"compilerOptions":{"paths":{"@/*":["./src/popup/*"]...
1、popup页面开发调试 cd .\popup\npm run serve popup弹窗面板是用vue框架写的,直接启动项目即可,改好页面直接插件根目录运行打包命令更新即可。 2、panel页面开发调试 和popup页面一样,直接启动项目调试,改好后重新打包即可。 源码 Gitee:https://gitee.com/zheng_yongtao/vue-chrome-extension-quickstart.git ...
1、popup页面开发调试 cd .\popup\ npm run serve popup弹窗面板是用vue框架写的,直接启动项目即可,改好页面直接插件根目录运行打包命令更新即可。 2、panel页面开发调试 和popup页面一样,直接启动项目调试,改好后重新打包即可。 源码 Gitee:https://gitee.com/zheng_yongtao/vue-chrome-extension-quickstart.git ...
vue开发 Chrome 插件优势 ▍避免复杂的通信 原生的文件开发插件,需要使用 chrome.runtime.sendMessage({action:ACTION.START_FETCH,data:xxxx})来传递数据,就那么一两个还是可以的,但是往往我们要做的插件不能是这么简单的。通信多了就麻烦了,vue 就可以解决这个问题,不需要麻烦的通信。
Hello World插件 有了基础知识,我们速度来个Hello World,先写manifest.json。 {"manifest_version":2,"name":"Hello","version":"1.0.0","description":"Hello, Chrome extension.","icons":{"16":"img/icon.png","48":"img/icon.png","128":"img/icon.png"},"browser_action":{"default_icon":...
最近写了一个可以利用 vue 或者 react 快速开发 chrome 插件的 boilerplate,只需要使用我之前写的 bigroom-cli 工具,就可快速简单地进行启动、打包、编译等,同时也支持保存代码后,插件自动更新,页面自动刷新。 boilerplate 生成: 首先我们安装 bigroom-cli: npm inst