美文网首页前端开发那些事儿
vue3开发chrome插件心得

vue3开发chrome插件心得

作者: 许彦峰 | 来源:发表于2021-04-05 15:05 被阅读0次

生成vue3项目

通过vue create app创建项目后,我们会发现仅仅只能用来开发web页面,如果要开发chrome插件,还需要手动配置下。

配置插件页面

chrome插件都有popup、devtools、options等页面,vue支持多页面,通过vue.config.js配置pages即可满足需求。

本质上这些页面和普通的web页面没有任何区别,但是我们可能需要在这些页面中调用chrome的相关api,为了能够顺利build,我们可以npm i @types/chrome来安装声明文件,同时也方便我们编写。

生成background.js,content.js

最麻烦的也是这里,如何单独生成这些js文件,这里我找到了插件

使用vue-cli-plugin-browser-extension可以快速的帮我们处理好background.js、content.js单独生成的问题,但是对于注入脚本的问题没有解决,我也提了个issues

同时还有其他解决办法
vue-cli-plugin-chrome-ex
vue-web-extension

好像vue-cli-plugin-browser-extension,对以上2个进行了融合

掘金上有篇文章,详细介绍了手动vue3搭建chrome插件项目的细节

相关文章

  • vue3开发chrome插件心得

    生成vue3项目 通过vue create app创建项目后,我们会发现仅仅只能用来开发web页面,如果要开发ch...

  • chrome 插件开发心得

    最近一个多月都在开发chrome的插件, 从无到有, 算是了解部分了!说下chrome开发前需要具备的基本东西吧...

  • Mac下导出chrome插件

    Mac下导出chrome插件Chrome Extensions 插件扩展程序开发入门mac 下chrome扩展插件...

  • Chrome插件开发

    Chrome插件开发

  • 开发笔记

    最近做rails开发。 1 chrome 插件 postman这个chrome插件,用来调试api还是颇为方便的。...

  • 技术开发中好用的chrome插件

    今天的主要推荐技术开发用的Chrome插件,对做技术开发的朋友很有帮助,用了这些chrome插件,开发效率可以得到...

  • react-native Expo 下载

    reactNative开发工具 Expo自行下载:Chrome插件下载(需要梯子翻墙)1、下载Chrome插件AP...

  • Chrome扩展开发

    Chrome扩展开发 标签(空格分隔): Chrome扩展 1、写在前面 Chrome插件是一个用Web技术开发...

  • 5分钟开始你的Chrome插件开发

    快速了解 & 直接下载上手开发 1、什么是Chrome插件 Chrome插件通常是.crx后缀的文件;通过谷歌网上...

  • Chrome插件初步上手体验

    最近有接到任务需要开发一款具备自动抓取功能的chrome插件,借此机会也对chrome插件开发工作有了初步的认识,...

网友评论

    本文标题:vue3开发chrome插件心得

    本文链接:https://www.haomeiwen.com/subject/vprdkltx.html