Auto study on browsers

by

Now there are many classes to study. These web applications always check the user’s action frequently. Once it finds the user is not operate the computer, the course will stop. I developed a program to anti-check and make the web application run continuously.

Injection JavaScript to the web application

Tampermonkey is a popular userscript manager. It’s available for Chrome. Tampermonkey makes it very easy to injection JavaScript to any webpage by specialize the URL in the script header. For example, the following code will injection JavaScript to niunep.com.

// @match        https://www.niunep.com/*

A layer is added to show the status to avoiding open the console. Here is the code

var topBox = "<div style='position:fixed;z-index:999999;background-color:#ccc;cursor:pointer;top:9%;left:0px;'>"+
						"<div id='console' style='font-size:12px;padding:8px 2px;color:#FFF;background-color:#25AE84;'></div></div>"
				 	 "</div>";
 $("body").append(topBox);
 var log_div=$("#console");

    function log(msg)
    {
       log_div.text(Date()+":"+msg);
    }

Storage and communication between pages

There are many pages on a website. There are always a page including all the links to the detail pages. I call them “list page” and “detail page”. The script in the list page finds all the links and open a new tab for the fist links.

var jjxx=$(".item:contains('开始学习')");
console.log(jjxx.length+" jjxx items found. start jjxx item 0");
       window.open("https://www.niunep.com/#/study/course/detail/10&"+jjxx[0].dataset.resourceId+"/6/1");

The script in the detailed page checks the play status frequently. When the study is finished, close the tab and tell the script in the list page to start a new tab. 

console.log("finished study");

clearInterval(interval_id);
window.close();

How to tell the list script that message? The storage in chrome is used. The storage is shared for all the tabs. The following function is used to manage the storage:

GM_setValue(name,value) Set the value of 'name' to the storage. 
GM_getValue(name) Get the value of 'name' from the storage.
GM_addValueChangeListener(name, function(name, old_value, new_value, remote) {})
//Add a change listener to the storage and returns the listener ID.
GM_removeValueChangeListener(listener_id) Removes a change listener by its ID.

Two storage variables are used. One is ‘store’. It is set to be 1 when a detail tab is opened and it is 0 when the study is finished. A callback function is registered when this storage changes. The other one is called ‘listener id’ to store the listener id. So a new tab will start in the callback function if there is any pages.

function(name,old_value,new_value,remote){
            if(new_value==0)
            {
                xx_id++;
                if(xx_id<jjxx.length)
                {
     window.open("https://www.niunep.com/#/study/course/detail/10&"+jjxx[xx_id].dataset.resourceId+"/6/1");

                    GM_setValue('store',1);
                    log("start "+ xx_id);
                }
                else
                {
                    console.log("finished");
                }


            }
        }

Anti-nobody check

The study page will check the action of the viewer frequently. Once there is no actions for a short time, the study will paused and show a message box. I tried several methods to simulate the mouse action on the detail page with the help of jquery. It seems the browser can distinguish the real click and the simulated click. All the simulation in the browser failed. So the simulation outside the browser is required. The pyautogui package in python can simulate the action on the full screen and it is easy to use. Here is the python code

import pyautogui,time
while True:
    pyautogui.click(x=1722,y=375)
    a=pyautogui.screenshot().getpixel((328, 832))[1]
    if a>200 :
            pyautogui.click(x=328,y=832)
    time.sleep(5)

Answer the questions

There is not only videos to view, but also questions to answer.

Leave a Comment