如何开发chrome插件？

网友解答: 感谢邀请！非常荣幸回答您的提问。一、开发chrome插件的预备技术工欲善其事，必先利其器，首先第一步是要准备开发插件所要掌握的技术储备，有如下几个方面。HTML/CSS/JS

感谢邀请！非常荣幸回答您的提问。

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

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

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

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

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

二、入门必备

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

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

包括扩展的名称（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. 安装

将打包后的 .crx 程序文件直接拖到 Chrome 中即可完成插件安装。

好了，整体就是这么一个学习流程，具体的每一步骤都需要您去学习和研究，这里不可能写成一部教程，学习的规划有了，我相信很快您就能写出第一个chrome插件了，加油！

同时，欢迎在评论区发表你的观点和看法，共同探讨学习，共同进步！