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

这是我参与更文挑战的第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项目。。。。。。。。。。。。。。。

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