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 Extension 小试牛刀

 

 

 

点击自动浏览后,会自动在该Chrome页面上打开多个浏览器页签显示所有未读的记录 软件开发中问题汇总: 怎么使用Jquery

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

 

Chrome Extension 小试牛刀

 

 

 

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

Chrome Extension的图标怎么设置呢?

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

点击Chrome Extension图标,展示的页面

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

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

 

Chrome Extension 小试牛刀

 

 

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

点击按钮后,按钮颜色编成蓝色,如果有其他按钮,则其他按钮字体颜色为黑色,另外:点击按钮后,与当前网页进行通讯,返回页面上所有没有浏览记录的ID,并用【;】分割。

 

Chrome Extension 小试牛刀

处理网页数据的页面逻辑

通过jquery查询当前页面中所有的未读记录,遍历并把所有的id用【;】分割。

一定要有return true.

 

Chrome Extension 小试牛刀

 

 

写在最后:

刚开始结束的时候,经历了各种坎坷,

Chrome Extension 小试牛刀

 

 

由于是Chrome Extension与页面的数据进行通讯,各种搞不定,现在基本可以通过这个模式化的界面与各种服务、http页面等进行互操作了。

通过这次Chrome Extension的开发,不仅重新熟悉了各种js,而且最重要的是,以后简单的爬虫,再也不用打开vs,吭哧坑成的编程啦。

Chrome Extension 小试牛刀

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zggjsz.html