• 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.

• 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

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

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

• 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*/
    });
}

• 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 the chrome.
• Make a submission on codechef.
• Observe the console of both background script and submission page for any error and fix it.