chrome扩展(浏览器插件)开发实用教程

原创文章，转载请注明出处。

作者：简体字丶冯;

QQ:564372931

1．Chrome能搞这些事情

　　（1） 操作浏览器中打开的页面DOM

　　　　这能做什么哪？譬如说你想修改页面DOM（DOM是什么，找度娘，这娘们懂得多。），什么CRUD都可以。当然为了安全期间，扩展不允许直接调用页面中js文件（玩法后边会讲）。

　　（2） 与服务器通信

　　　　插件api提供接口可请求服务器（跨域XMLHttpRequest请求），这意味着你可以给插件做一套后台服务。譬如，印象笔记剪裁就是通过插件获取页面数据再发送到后端服务器中。

　　（3） 使用浏览器内部功能

　　　　譬如标签或者书签等

2．扩展里都是些什么鬼

　　扩展程序是一个“.crx”文件。“.crx”文件是一种特制的压缩文件，把后缀改为“.rar”后用解压软件可以直接解压。解压后你会看到这些东西：

　　（1） 一个manifest.json文件

　　　　这个文件暂且叫它“配置文件”吧，也就是你的插件可以使用那些浏览器功能都需要在该文件中配置。

　　（2） 一个或多个html文件

　　　　这类文件一般用不到太多，除非你插件中含有好多页面

　　（3） 可选的一个或多个javascript文件

　　　　js是用来实现插件功能的主要语言，你可以没有（意味着插件没有功能，0.0）

　　（4） 可选的任何其他有用文件

　　　　插件中用到的css、图片等等。这个文件也可以用到你要操作的页面中，譬如说你的插件是往每个打开的页面中插入一个不可描述的图片[坏笑]。

3．扩展开发最重要的东西

　　这部分内容是扩展开发中最重要的东西，也是开发基础（或者说扩展的原理）。

先上手工图

　　（1）概述环境

扩展分为后端环境、前端环境。前端环境是扩展和页面DOM交互的环境，插件可视化的东西。后端环境是插件处理业务的部分，不能与前端共享数据。

Content_script环境

作为扩展前端环境，负责与页面DOM进行交互。这部分内容会在加载页面的时候直接加载进页面，如图

　　（2） Background环境

这部分为扩展后端主要环境，在插件安装后就开始运行的。插件主要逻辑处理在这边写，可以调用浏览器api。

　　（3） Popup环境

当点击插件图标时该环境会运行，该环境可以调用background的数据（通过api接口调用）。Popup会在用户点击图标后出现，可以包含任意你想要的HTML内容并会自适应大小。自适应大小有点坑啊，貌似不能自己设计宽高。我测试是这样，你也可以自己试试。

　　（4）设置环境

这部分一般是用来初始化扩展的，比如说你扩展的某些数据需要用户设置通过改环境。通常插件保存的设置数据保存在storage 中，其实就是chrome对localStorage

的包装（自行度娘）。

　　（5）环境之间的数据传输

数据传输才是扩展的重中之重，怎么玩？content_script通过js获取页面DOM，当然虽然content_script不能直接调用页面中的js。但是它能监听页面中元素的按钮事件（这句话能解决在什么时候content_script对页面进行操作）。一直说Content_script能操作DOM，说简单点就是能在页面写入html、js用到css。

　　content_script通过chrome.extension.sendRequest()接口发送数据到后端background环境，与之相应的接受接口为chrome.extension.onRequest.addListener()。插件支持json数据传输！

　　background与popup之间共享数据及方法，popup通过chrome.extension.getBackgroundPage()获取background中的数据方法等（设置环境也可以这样玩）。

4．最实用的东西

对于开发来说最实用的是什么哪，当然是调试了 0.0。

涉及到三个四个环境，content_script、backgroud、popup、设置。

（1） Content_script调试

F12 -> sources -> content scripts

　　　　 （2） Popup 调试

点击扩展图标出现popup页面后f12 和普通页面一样调试即可

（3） Background 设置调试

浏览器设置 -> 扩展程序 ->如图

　　　　　　点击相应入口进入后与普通页面调试方法一致

　　　　　　（4） 一些实用的

　　　　　　在调试过程中，如果修改了manifest.json文件需要删除插件重新加载，否则去掉“已启用”按钮的选择再选中即可更新插件。

　　　　　　忘记说怎么加载正在开发中的插件了，哈哈。再开发者模式下，通过“加载已解压的扩展程序”按钮引入未打包的程序。“打包扩展程序”按钮是把插件文件打包成“.crx”文件。