Chrome Extension 小试牛刀

 

自从有了Chrome之后，就喜欢上了这个浏览器，今后IE 886了。

之前做爬虫，作登陆，作数据采集，作数据处理等各类功能，后来H5出来后，出现了，除了Session/Cookie 出了Local Storage,暂时尚未更好的办法获取Local Storage。因为处理的数据比较少，因此决定研究一下Chrome Extension。

 

百度了一下Chrome Extension,能够经过Chrome Extension 官网进行学习，简单上手。网址: https://developer.chrome.com/extensions

要解决的问题：

公司OA使用了不少年了，其中的流程备案记录不多关注查看，今天公司通知最近要检查，确认你们是否都看了，不然会进行处罚。今天要解决的问题就是自动把全部的未查看过的抄送记录，都确认为已阅读。

解决方案：

原本能够经过SQL语句，修改数据库的是否阅读状态。这是最近单的方式，可是和Chrome Extension 就没有关系了。

因此仍是经过模拟的方式，经过点击一个按钮自动浏览本页的全部标记为未读的记录。

操做记录：

进入流程抄送记录，点击【自动浏览】开始操做。

 

 

 

 

点击自动浏览后，会自动在该Chrome页面上打开多个浏览器页签显示全部未读的记录

软件开发中问题汇总：

怎么使用Jquery

自动使用Juquery原来，对原生的js是愈来愈陌生了，写Js第一件事就是下载一个Jquery用上。

 

 

 

 

在 manifest.json中配置对应的jquery路径，而后在contentscript.js和background.js中就可使用Jquery了。

Chrome Extension的图标怎么设置呢？

看到上面manifest.json中的icons属性了吗？设置上对应的图标便可。注意大小。

点击Chrome Extension图标，展现的页面

这是一个特别特别简单的html页面，只有一个按钮，最后加了一个index.js的js文件，必定要引用到最后。Js文件主要是对该弹出页进行操做。

这个插件只有一个动做，就是点击上面的【自动浏览】按钮。

 

 

 

点击【自动浏览】按钮的逻辑

点击按钮后，按钮颜色编成蓝色，若是有其余按钮，则其余按钮字体颜色为黑色，另外：点击按钮后，与当前网页进行通信，返回页面上全部没有浏览记录的ID,并用【；】分割。

 

处理网页数据的页面逻辑

经过jquery查询当前页面中全部的未读记录，遍历并把全部的id用【；】分割。

必定要有return true.

 

 

 

写在最后：

刚开始结束的时候，经历了各类坎坷，

 

 

因为是Chrome Extension与页面的数据进行通信,各类搞不定，如今基本能够经过这个模式化的界面与各类服务、http页面等进行互操做了。

经过此次Chrome Extension的开发，不只从新熟悉了各类js，并且最重要的是，之后简单的爬虫，不再用打开vs，吭哧坑成的编程啦。