如何开发chrome插件

一、开发chrome插件的预备技术

工欲善其事，必先利其器，首先第一步是要准备开发插件所要掌握的技术储备，有如下几个方面。

HTML/CSS/JS

网页前端开发必备知识，如果您是一位前端开发攻城狮，恭喜您，这一步可忽略喽。因为Chrome插件开发实际上可以理解是开发一款小型的web应用。

JSON

JSON做为一种数据交换格式，需要了解和掌握，要不然manifest.json文件没法写。

Chrome扩展API

写插件少不了和浏览器的API进行交互的，了解越多API的内容，开发起插件游刃有余。API文档是一定要看的，谷歌官方（E文）的或者360极速浏览器提供的API文档（中文）都可以查阅。

二、入门必备

做足上述的准备工作之后，就可以试着写一个简单的插件来入门了，当您体会了整体开发流程，并最终发布一款自己写的插件之后，你会发现入门之后，自己想实现功能更强大的插件有了思路。

manifest.json文件的编写

该文件是核心配置文件，需要掌握manifest.json文件结构和字段含义。

1. 基本字段

包括扩展的名称（name）、版本（version）、描述（description）、图标位置（icons）和 manifest 版本（manifest_version）等信息。

2. browser_action 字段

browser_action指定了放在Chrome工具栏中的插件图标，它定义了插件图标文件位置（default_icon）、提示文字（default_title）和点击图标所显示的页面位置（default_popup）。

3. permissions 字段

permissions 是一个数组，它定义了插件需要向 Chrome 申请的权限，例如是通过 XMLHttpRequest 跨域请求数据？访问浏览器选项卡（tabs）？获取当前活动选项卡（activeTab）？浏览器通知（notifications）？还是存储（storage）？等等，可以根据您的需要自行添加。

4. background 字段

background 可以使插件常驻后台，比较常用的是指定子属性 scripts，表示在插件启动时自动创建一个包含所有指定脚本的页面。

5. content_scripts 字段

content_scripts 会根据你在它内部定义的 matches规则去匹配url，然后在匹配成功的url页面中注入你指定的js和css等文件。

测试打包发布

1. 测试

方式一：打开“设置 > 更多工具 > 扩展程序”

方式二：Chrome 地址栏中输入：chrome://extensions

选择“加载已解压的扩展程序…”，之后选定插件文件所在目录即可。测试当中少不了修改，如果修改了代码，点击“重新加载(Ctrl + R)” 再重新进行测试。

2. 打包

开发完毕，需要打包成 .crx 插件包。使用“打包扩展程序” 进行打包即可：具体位置在插件管理页有一个打包按钮，点击它。第一次打包，密钥文件不需要选择，Chrome 会帮我们生成密钥，在以后更新打包时再使用。

3. 安装