Codechef Notifier

Project Description
Codechef is a very common platform used by many aspiring coders to improve their coding
skills. Often when using CodeChef, its servers are so overloaded that our submissions take a
long time to get verified by the judge and our time is wasted in checking for results again
and again. This extension aims to save this time by automating the process of fetching the
result and informing you as soon as the result is available so that you can move on to solve
the next question and not worry about whether the result has been passed by the judge or
not.

Author
Satyam Kumar

Collaborator(s)
Kevin Paulose, Kiran Suresh

Project Language(s)
Javascript

Difficulty
Beginner

Duration
10 hours

Prerequisite(s)
Javascript, Chrome Developer Tools

Overview
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:

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.

Task 1
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

• 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.
• Check out the responses for the two possibilities of the verdict - available and not
available.

References
● How to observe network activity using chrome developer tools
● What is an x-csrf-token header?

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.

Task 2
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 the CodeChef
website makes multiple requests to this URL at some certain interval.
• Make sure to add permission for webrequest API in manifest.json

References
● What is background script?
● How to use webrequest chrome extension api?
● What is manifest.json?

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

Task 3
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 a 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.
*/

});

References
• What are content scripts?
• How to receive message in content script from background script?
• How to traverse HTML DOM?

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.

Task 4
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.
*/
});
});

References
• How to send message to content script from background script?
• What is tabs permission?

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

Task 5
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*/

});
}

References
• How to run tasks in javascript at some interval?
• How to send desktop notification?

Expected Outcome
Core activity of extension is complete after this task.

Task 6
Test run
Install this extension to chrome and make a test run.

Requirements
• Before installing make sure your project directory looks similar to below
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 chrome.
● Make a submission on CodeChef.
● Observe the console of both the background script and submission page for any
error and fix it.

References
• How to install chrome extension in developer mode?
• What is browser action?

Expected outcome
If 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).
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.