Chrome扩展框架系列文章

本人是一个web前端开发工程师，主要是vue框架，整理了一些Chrome扩展，今后也会一直更新，有好建议的同学欢迎评论区分享讨论 ;-）

Chrome扩展专栏：点击此处

文章目录

• Chrome扩展框架系列文章
• • 1、项目介绍
  • 2、软件架构
  • 3、安装教程
  • 4、使用说明
  • 5、注意事项

仓库地址：此处
较完善框架：此处

1、项目介绍

一个浏览器插件的demo，初始化了一些文件。

2、软件架构

1. manifest.json 等文件是浏览器插件配置文件，必须存在，具体配置信息查看此处。manifest1.json，manifest2.json 是备份用的 manifest1.json为测试环境；manifest2.json 为线上环境。
2. contentScripts1.js 以及 contentScripts2.js 主要给manifest1.json，测试的时候，避免修改文件后，需要手动更新插件…
3. js 存放主要的js文件。
4. css 存放主要的css文件。
5. image 存放主要的图片文件。

下面3个图用来展示 manifest1.json 的主要逻辑~

3、安装教程

1. 下载demo
   

2. 打开谷歌浏览器扩展功能
   

3. 打开开发者模式
   

4. 选择下载demo的文件夹即可

5. npm install -g anywhere 测试环境需要，开启本地服务，可以直接访问测试的本地文件
   

4、使用说明

1. Demo 直接打开百度即可
   
2. 代码展示（文件已经引入了JQUERY，不需要的可以删除…）
   

5、注意事项

1. manifest.json 才使配置生效，manifest1.json以及manifest2.json 是用来备份，一个是开发环境，一个是线上打包环境。
2. manifest1.json 配置了contentScripts1.js，如果contentScripts1.js 改动需要去点击谷歌浏览器插件的刷新按钮！！！然后contentScripts1.js 动态配置了 contentScripts2.js，里面配置的文件就是主要运行的代码文件，可以动态编辑。（需要配合anywhere，在根目录运行即可）
3. manifest2.json 直接配置了主要代码，每次编辑代码，需要手动去谷歌浏览器点击刷新按钮，但是不用去启动anywhere服务。
4. manifest2.json 线上环境的时候，JS文件引入顺序需要注意…坑…