chrome扩展插件开发入门

chrome扩展插件，可以看作是页面的外挂，在打开特定页面的条件下，会执行其逻辑（可以修改原页面的内容、逻辑）。所以十分适合开发一些提效的小工具。

主流的开发语言是JavaScript。所以开发前尽量多掌握一些语法。建议看遍《JavaScript权威指南》，挑其中的语法看即可。
js设计上没有线程、协程，所以逻辑处理上，要各种异步回调。而异步处理时，又十分需要闭包特性，所以js中变量生命周期全是闭包特性的。变量的生命周期不与函数调用行为绑定（js中没有调用栈中存放局部变量这种概念），而是与方法对象的定义绑定（执行函数定义语句时，并列及外层的变量如果被函数使用，便与方法对象关联在一起了）。因此语句中，简单传递了一个函数对象，函数体外被函数使用到的变量也一同传递了。

开发chrome扩展插件，需要适当运用chrome提供的能力，不要勉强自己，太强大的功能并不适合在这里开发。
功能可以分成两类：1、任何的前端技术。2、chrome额外提供的浏览器扩展功能

插件需要有一个清单文件manifest.json，用来定义描述插件的基本信息。下面有我常用的两套写法

image.png

第一套，关键字段是content_scripts，表示你的插件需要在打开什么样的页面时，在页面上额外执行什么js文件，也就是向指定页面注入的额外的脚本代码；
第二套，关键字段background，表示你的js文件是在页面之外执行的。可以去使用chrome的各种扩展api；不再享有页面数据的操作能力，同时也没有了浏览器对页面跨域请求的限制。

学习开发的最佳方式就是照猫画虎，同时去对照理论知识。

我列举下自己的常用的功能点：
1、excel导出 + 向页面补充dom元素 + 发送带登陆态http请求
不应该小瞧js的本身的能力，里面关键的功能是excel文件生成，这实打实的是由一个js库做到的。js的二进制数据处理能力弱，但还是有一些的。

image.png

使用jquery进行http请求，单元格整理为二维字符串数组。转换excel数据，进行下载；

image.png

按xlsx.core.min.js库的格式，传入参数，生成excel文件，并转换为数据块。

image.png

将excel数据块创建为url对象，作为一个超链接的目标，模拟一个鼠标点击事件交由超链接对象处理。

2、excel上传解析、导出 + 文本复制 + 向页面补充dom元素 + 发送带登陆态http请求
上传excel解析，也是用了同一个的js库。加上js强大的json处理能力，用来进行excel与json配置互转很合适。

image.png

补充一个隐藏的input dom元素，指定其授受excel文件

image.png

点击处理事件为读取excel

image.png

交由xlsx.core.min.js库处理为表格对象，进行回调处理

image.png

补充一个上传按钮，在点击时，触发input元素点击

image.png

处理表格对象为json配置，写入文本框

image.png

image.png

按clipboard.min.js库的需要，添加的复制按钮，绑定上文本框

3、修改页面dom元素

image.png

使用jquery库，修改css样式
4、拦截替换http请求结果

image.png

拦截特定的请求，返回内容替换为本地文件内容