Project Introduction

Objective

Create a browser extension that will automatically catch the unique ID of the submissions made to the problems on Codechef and check the verdict of the judge on that submission and notify the user through desktop notification once the verdict is available

Project Context

CodeChef is a platform for many aspiring coders to improve their coding skills. It is a very frequent problem with CodeChef that its servers are so overloaded that submission made to the judge takes a very long time to obtain the verdict. The coders are left with no option but to check the page repeatedly after some interval to check if the verdict is available or not.


Through this extension, we aim to remove this extra effort of checking the submission page to know the verdict of our submission. Using this extension we will automate the process of capturing the submission request and pinging the REST API of CodeChef responsible for giving the verdict repeatedly at some interval until the verdict is obtained. When the verdict is available, this extension will inform the user using desktop notifications so that the user can check the detailed status of their submission.

Project Stages

This project consists of following stages:

Project_stages

High level approach

  • Make a submission on codechef and monitor the request made by the browser using the network tab in chrome developer tools.
  • Identify the appropriate request and note down the URL to which the request is being sent and its request headers.
  • In the background script, use the webRequest API of chrome to monitor the URL obtained in step 2 and save the submission id and x-csrf-token header value.
  • In manifest.json add the values to inject a content script in the submission page. Add code in the content script to fetch problem name and code from the web page and return these values upon request by background script.
  • Again in the background script, upon detecting the submission request in webRequest API, send a message to the content script to obtain problem name and id and save them.
  • Finally, repeatedly use XMLHttpRequest from the background script to the URL obtained in step 2 in some regular intervals until a verdict is obtained. Make sure to add x-csrf-header.
  • When a verdict is obtained send a desktop notification to the user.

Objective

Create a browser extension that will automatically catch the unique ID of the submissions made to the problems on Codechef and check the verdict of the judge on that submission and notify the user through desktop notification once the verdict is available

Project Context

CodeChef is a platform for many aspiring coders to improve their coding skills. It is a very frequent problem with CodeChef that its servers are so overloaded that submission made to the judge takes a very long time to obtain the verdict. The coders are left with no option but to check the page repeatedly after some interval to check if the verdict is available or not.


Through this extension, we aim to remove this extra effort of checking the submission page to know the verdict of our submission. Using this extension we will automate the process of capturing the submission request and pinging the REST API of CodeChef responsible for giving the verdict repeatedly at some interval until the verdict is obtained. When the verdict is available, this extension will inform the user using desktop notifications so that the user can check the detailed status of their submission.

Project Stages

This project consists of following stages:

Project_stages

High level approach

  • Make a submission on codechef and monitor the request made by the browser using the network tab in chrome developer tools.
  • Identify the appropriate request and note down the URL to which the request is being sent and its request headers.
  • In the background script, use the webRequest API of chrome to monitor the URL obtained in step 2 and save the submission id and x-csrf-token header value.
  • In manifest.json add the values to inject a content script in the submission page. Add code in the content script to fetch problem name and code from the web page and return these values upon request by background script.
  • Again in the background script, upon detecting the submission request in webRequest API, send a message to the content script to obtain problem name and id and save them.
  • Finally, repeatedly use XMLHttpRequest from the background script to the URL obtained in step 2 in some regular intervals until a verdict is obtained. Make sure to add x-csrf-header.
  • When a verdict is obtained send a desktop notification to the user.

Observe network request in chrome developer tools

Make a submission to any problem on codechef and observe all the network requests that are being made by the browser.

Requirements

  • Target those network requests which have the same name as submission id. You can find the submission id in the URL of the browser. The sequence of digits after the last slash(/) is the submission ID.
    For Example: Suppose the URL of the submission page is https://www.codechef.com/submit/complete/41025313 then in the network request you will find a request with name 41025313 as shown in figure below
    Network_request

  • Note the URL the request is being sent to.

  • Note the request headers that are being sent with the request. Especially look for x-csrf-token.

headers.png

  • Check out the responses for the two possibilities of the verdict - available and not available.

Expected Outcome

By doing this you will have an idea of how codechef is performing checks for the verdict of the submission you made and what are the request and response structure for case of verdict available and not available.

Use Webrequest API of chrome extension to capture request

Use the webRequest API of chrome extension to capture the requests made to the URL observed in task 1.

Requirements

  • Use onBeforeSendHeaders event of webrequest API to perform this activity.
chrome.webRequest.onBeforeSendHeaders.addListener((details) => {
 
    /* check the URL from details object
    * if the url matches the required codechef url then
    * extract the submission id from the url
    * check if a request with that submission id is already present in your storage
    * The above check is necessary because codechef repeatedly sends this
    * request until the result is obtained.
    * If the submission id is not present then save request and call the function made
    * for fetching question info, fetching the result and notifying the user.
    */
 
})
  • Implement the code for capturing the request and saving the submission id and x-csrf-token value.
  • Make sure to check whether you have already saved this info because codechef website makes multiple requests to this URL at some certain interval.
  • Make sure to add permission for webrequest API in manifest.json

Expected outcome

After doing this task extension will now be able to observe browser requests and identify when you are making submission to a problem on codechef.

Obtain the details of problem

Make a content script and add a rule in manifest.json to inject it on the submission page of CodeChef. This content script will query the HTML DOM and obtain values like problem name and problem ID.

Requirements

  • Add a rule to manifest.json to inject a content script on the submission page of the codechef.
  • Add code in this content script to fetch problem name and ID from HTML DOM.
  • Add code in this content script to listen for a message from the background script. Upon receiving this message send the problem name and ID as response to the background script.
chrome.runtime.onMessage.addListener((message) => {
 
    /*
        * query DOM to get problem name and code
        * user sendResponse method to send info back to the sender
        * as a JSON object.
    */
 
});

Expected Outcome

Upon completion of this task, the content script should be able to fetch details of the problem such as problem name and problem ID and send it to the background script when requested.

Obtain problem details from content script

Send a message from background script to content script to obtain the problem name and ID and save it.

Requirements

  • Upon detecting a new submission in the webRequest API, send a message to the content script of the tab which made the request.
  • Save the response obtained from the request for further use
  • Make sure to add tabs permission in the manifest.json.
chrome.tabs.query({object}, (tab) => {
 
    /*
        * replace the object with the query params. check documentation on chrome.
     */
 
    chrome.tabs.sendMessage(tabId, message, (res) => {
        /*
            * replace tabId with ID obtained from tab object above.
            * message can be any JSON string. Parse response object and 
            * save the response corresponding to the appropriate submission code.
         */
    });
});

Expected outcome

Upon completion of this task, the extension will be able to send message to the content script to obtain the problem details.

Ping codechef server to obtain the verdict

Upon receiving all the info, send an XMLHTTPRequest (XHR) to the URL obtained in task 2 repeatedly with appropriate headers at some fixed interval until the verdict is obtained. Once the verdict is obtained send a desktop notification to the user to inform him/her.

Requirements

  • When all the info is received the background script repeatedly makes XMLHttpRequest to the CodeChef server using the URL obtained in task 2 at some interval.
  • Make sure to add the x-csrf-token header in the XHR request.
  • In each cycle parse the json response to check if the verdict is obtained. If not then make the request again after some time.
  • When verdict is obtained then ping the user using desktop notification.
  • Make sure to add notification permission in manifest.json.
function checkResult() {
 
    $.ajax({
 
        url: /*requested url*/
 
        dataType: "json"
 
        headers: /*required headers as json object */
 
        success: /*
        * function to handle success of XHR request
        * check if the response shows verdict available
        * if verdict available then notify user else
        * user setTimeout function to do recursive call
        * to this function after some seconds.
        */
 
        error: /* function to handle errors*/
    });
}

Expected Outcome

Core activity of extension is complete after this task.

Test run

Install this extension to chrome and make a test run.

Requirements

  • Before installing make sure your project directory looks similar to below

Project Structure
Note: Files popup.html, popup.js and style.css are not mandatory. These are for browser action if you plan to design.

  • Install this extension to the chrome.
  • Make a submission on codechef.
  • Observe the console of both background script and submission page for any error and fix it.

Expected outcome

It the extension runs successfully then you will receive a notification similar to below (look of the notification depends on the type attribute of chrome notification API you used. I have used list type here).

notification

This extension is now complete. You can explore the requests on codechef website to add more features to it like showing results in browser action etc.