从零做一个Chrome插件实现起点中文网自动签到

3,748 阅读3分钟

这是我参与更文挑战的第1天,活动详情查看: 更文挑战

最近一直在起点中文网上看小说,忽然发现官方竟然卖自动签到卡,五块钱一个月!身为一个程序猿,怎么能花这些冤枉钱!

于是开始了写一个脚本的念头。

第一步:尝试规律性模拟点击按钮

图片中的‘已领取’在未领取前是一个红色的按钮!!

  1. 尝试了直接在控制台中写js,可行又不完全可行,因为每次点击完领取后刷新页面;只好另寻它路。
  2. 想来想去,就只能找一个插件来自动注入这段代码才行。所以,我改造了一个以前好久没用过的插件,将这段代码塞了进去。完美!好使!

但是这里还有一个问题,就是虽然是实现了,不过并没有去理解这个谷歌插件的开发方式,

第二步:全网搜索谷歌插件开发文档

经过一些搜索后,终于找到了目前最适合写这个脚本的文档。

英文文档最好找,谷歌一搜就可以搜到,需要翻墙。

中文文档就参差不齐了,最后找到一个非常优秀的博客,如果有需要可以去点个赞,【干货】Chrome插件(扩展)开发全攻略

第三步:开始着手开发,功能逻辑并不复杂,只是一种思路

代码我已经传到了GitHub上,各位如果有兴趣可以去start一下。链接在这:pxyzexp-qidian

代码目录如下:

**_locales: ** 是为了国际化才引入的,这里其实不用引入,其他国家应该不会用起点看小说。

**img:**存放图标

**js:**js文件

**background.html:**持续在后台运行的HTML(常驻)

**manifest.json:**核心配置文件了,这个最重要了

**popup.html:**浏览器右上角图标显示的页面

重点说一下三个文件:manifest.json、content-script.js、popup.html

manifest.json(必有,插件所有配置参数均在这里面):

//这里是我的配置。
{
	"manifest_version": 2, // 清单文件的版本,这个必须写,而且必须是2
	"name": "pxyzexp-qidian", // 插件名称
	"version": "1.0.0",       //插件版本
	"description": "起点自动签到工具",
	"background": {           //插件后台
	   "page": "background.html" 
	},
	"icons":                  //插件图标
	{
		"48": "img/icon.png",
		"128": "img/icon.png"
	},
	"browser_action":         //浏览器右上角图标设置
	{
		"default_icon": "img/icon.png",
		"default_title": "起点自动签到工具",
		"default_popup": "popup.html"  //浏览器右上角图标展示页面
	},
       "content_scripts": 
	[
		{
			// "<all_urls>" :匹配所有地址
			"matches": ["https://my.qidian.com/level/*"],
			// 多个JS按顺序注入
			"js": ["js/content-script.js"],
			// 代码注入的时间
			"run_at": "document_end"
		}
	],
	// 默认语言
	"default_locale": "zh_CN"
}

content-script.js(js注入,自动点击按钮签到的脚本就这里面)

(function() {
	//定时点击,因为起点中文网签到的时候,会有时间限制,就挑了个最简单的方式,重复点击,对网页也不会造成什么负荷
	setInterval(function(){
		var demo = document.getElementById('elTaskWrap');
		var liEle = demo.getElementsByTagName('li');
		for(var i=0;i<liEle.length;i++){    
		    var aEle = liEle[i].getElementsByTagName('a');
			if(aEle.length != 0){
				aEle[0].click();
			}
		}
	},1000);
	//定时刷新页面,防止页面卡死了,或者是计算出问题,没过一段时间刷新一下,重新开始。
	setInterval(function(){
		console.log(new Date()+"刷新");
		window.location.reload();
	},600000);
	
})();

popup.html(图标展示页面,一张图足以说明问题)

第四步:总结

一直想研究研究Chrome插件来着,苦于没有一个业务场景,这次也算是一次初体验,以后可能会有更多的需要也说不定。

欢迎大家去github那里start项目。。。。。。。。。。。。。。。

大家加油,青山不改,绿水长流,江湖再见。