chrome扩展小结

最近为了给朋友帮忙写了一个Chrome小插件，主要就是解决重复的点击网页上基本固定的元素的问题，这也是我的第一个Chrome插件，所以现在想将学到的东西记录一下并且分享出来。

之前不了解的时候觉得Chrome插件很神秘很难写，但是这次接触之后发现只要有很基础的js技能就基本可以完成。

文件目录结构

目录结构

文件目录很简单。。其中最重要的就是每一个Chrome扩展里都有的项目配置文件——manifest.json。下面先介绍一下比较常用的一些配置项。

配置项

先贴张我的配置文件。

manifest文件

• manifest_version: 固定值为2
• name: 扩展的名字
• version: 扩展的版本号
• description: 扩展的介绍
• icon: 扩展在浏览器地址栏上显示的图标
• content_scripts: 在打开某个特定url的时候执行特定的代码
• permissions: 配置请求需要的url路径。。对相应url的请求没有限制。
  但是需要注意的是https到http的降级请求依旧执行不了。。

由于我的扩展主要是获取特定页面信息，所以只要在特定页面执行就行了。但是很多时候。。Chrome扩展会需要在点击之后展示一个弹窗，弹窗内进行一些操作。。那就需要提到下面这个配置项。
browser_action: 定义了扩展在浏览器下的行为。
其中default_popup定义了在浏览器中点击图标显示的默认页面，和正常的html页面一样，引入css和js文件的方式也一样。

使用及调试Chrome扩展

点击Chrome浏览器地址栏那条最右侧有一个竖着的省略号。。在下拉菜单里选择更多工具> 扩展程序，如下图所示。

导入步骤1

进入这个页面后，点击加载已解压的扩展程序，然后选择到扩展的文件夹就可以了。。在接下来的开发调试中，也可以进入这个页面点击重新加载按钮刷新扩展程序。

导入步骤2

总结遇到的坑

• 之前总以为浏览器插件能完全解决跨域问题，但是其实并不是。由于Chrome扩展内的存储方式就是cookie，session和localStorage，而这三种存储方式其实都存在一级域名的跨域问题。

• 没有setInterval函数，可能是出于安全性或者性能的考虑，Chrome插件中的setInterval函数是被禁掉的。但是在开发实践中，其实可以通过setTimeout实现这个功能。

window.setTimeout(function() {
  if(xxx){
    // do action
  }else{
    window.setTimeout(arguments.callee,500);
   }
},500);

• 不能解决302。。

• 遇到的难点还有js很难sleep。。但是访问太频繁的话网站一般的防爬机制又会被启动，会导致验证码等一系列问题。。那我最后采取的解决办法就是随机数的settimeout。。但是会导致代码很臃肿而不优雅。。不知道有没有什么更好的解决办法。。。