随笔- 57 文章- 0 评论- 311 阅读- 19万

开发Chrome插件，实现网站自动登录

　　近期被一个事情困扰着，我们采购了一款软件，里面有一个数据大屏页，当登录过期后，数据就会保持原状，不再更新。和供应商反馈了很多次，都无法彻底解决数据显示的问题，没办法，自己周末在家研究，网站自动登录的事情。

想到Chrome插件可以解决这个事情，主要原理就是：新开一个页，定时刷新这个页面，检测是否掉线，如果掉线，就触发登录按钮，实现自动登录，这个检测是在后台进行的，不能影响前端的数据大屏显示信息。

上代码：

　　一，每隔10秒钟刷新一下页面，检测是否掉线，掉线的标准就是有个方法返回的长度异常，异常后就刷新页面，显示出登录按钮，然后触发点击事件，这里不需要关心用户名和密码问题，因为已经让浏览器记住用户名和密码了，只需要登录就可以了，这个网站也比较简单，没有验证码等环节。页面命名为：main.js

$(document).ready(function () {
    var time=new Date();
        console.log('检测是否掉线 ready -'+time.toLocaleString()+'!');
 
    function checkWebStatus(){  
        console.log('检测是否掉线！');
         
        $.get("/MonitorStatus/GetOnlineUserCount",function(data,status){
            console.log("GetOnlineUserCount,数据: " + data.substring(0,100) + "\n状态: " + status);
             
            //掉线了，这个方法就会重定向到登录页，导致数据量大增
            if(data.length>50)
            {   
                //判断是否在登录页
                if ($("#loginSystem").length > 0){  
                    console.log('掉线了，将重新登录！');
                    $("#loginSystem").each(function () {            
                        $(this).click();                    
                    });
                }
                else
                {       
                    //大屏页不刷新，其他页刷新。         
                    if(location.href.indexOf("MonitorStatus")<0)
                    (                       
                        location.reload() 
                    )   
                }
            }
            else
            {
                console.log('未掉线！');
                //再探再报
                setTimeout(checkWebStatus, 10000);
            }
        });
    }
 
    setTimeout(checkWebStatus, 10000);
});

　　二，编辑manifest.json页，代码如下，主要功能是设置chrome插件属性，如名称，版本，权限，调用的js名称等。

{
    "name": "自动登录",
    "version": "1.0",
    "manifest_version": 3,
    "description": "自动登录",
    "icons":{
        "16":"./images/icon.png",
        "48":"./images/icon.png",
        "128":"./images/icon.png"
    },"permissions": [
        "tabs"
    ],"content_scripts": [
        {
            "matches": ["*://你的网站地址/*"],
            "js": ["jquery-1.11.3.min.js", "main.js"]
        }
    ]
}