Chrome扩展框架系列文章
本人是一个web前端开发工程师，主要是vue框架，整理了一些Chrome扩展，今后也会一直更新，有好建议的同学欢迎评论区分享讨论 ;-）
Chrome扩展专栏：点击此处
1、项目介绍
一个浏览器插件的demo，初始化了一些文件。
2、软件架构
- manifest.json 等文件是浏览器插件配置文件，必须存在，具体配置信息查看此处。manifest1.json，manifest2.json 是备份用的 manifest1.json为测试环境；manifest2.json 为线上环境。
- contentScripts1.js 以及 contentScripts2.js 主要给manifest1.json，测试的时候，避免修改文件后，需要手动更新插件…
- js 存放主要的js文件。
- css 存放主要的css文件。
- image 存放主要的图片文件。
下面3个图用来展示 manifest1.json 的主要逻辑~
3、安装教程
-
下载demo
-
打开谷歌浏览器扩展功能
-
打开开发者模式
-
选择下载demo的文件夹即可
-
npm install -g anywhere 测试环境需要，开启本地服务，可以直接访问测试的本地文件
4、使用说明
- Demo 直接打开百度即可
- 代码展示（文件已经引入了JQUERY，不需要的可以删除…）
5、注意事项
- manifest.json 才使配置生效，manifest1.json以及manifest2.json 是用来备份，一个是开发环境，一个是线上打包环境。
- manifest1.json 配置了contentScripts1.js，如果contentScripts1.js 改动需要去点击谷歌浏览器插件的刷新按钮！！！然后contentScripts1.js 动态配置了 contentScripts2.js，里面配置的文件就是主要运行的代码文件，可以动态编辑。（需要配合anywhere，在根目录运行即可）
- manifest2.json 直接配置了主要代码，每次编辑代码，需要手动去谷歌浏览器点击刷新按钮，但是不用去启动anywhere服务。
- manifest2.json 线上环境的时候，JS文件引入顺序需要注意…坑…
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/66375.html
