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”文件。