Change cookies when doing jQuery.ajax requests in Chrome Extensions

Question

I have wrote a plugin for facebook that sends data to testing-fb.local . The request goes through if the user is logged in.

Here is the workflow:

1. User logs in from testing-fb.local
2. Cookies are stored
3. When $.ajax() are fired from the Chrome extension
   • Chrome extension listen with chrome.webRequest.onBeforeSendHeaders
   • Chrome extension checks for cookies from chrome.cookies.get
   • Chrome changes the Set-Cookies header to be sent

And the request goes through.

I wrote this part of code that shoud be this:

function getCookies (callback) {
  chrome.cookies.get({url:"https://testing-fb.local", name: "connect.sid"}, function(a){
    return callback(a)
  })
}

chrome.webRequest.onBeforeSendHeaders.addListener(
  function(details) {
    getCookies(function(a){

// Here something happens

    })
  },
  {urls: ["https://testing-fb.local/*"]},
  ['blocking']);

Here is my manifest.json :

{
  "name": "test-fb",
  "version": "1.0",
  "manifest_version": 1,
  "description": "testing",
  "permissions": [
    "cookies",
    "webRequest",
    "tabs",
    "http://*/*",
    "https://*/*"
  ],    
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
        {
          "matches": ["http://*.facebook.com/*", "https://*.facebook.com/*"],
          "exclude_matches" : [
            "*://*.facebook.com/ajax/*",
            "*://*.channel.facebook.tld/*",
            "*://*.facebook.tld/pagelet/generic.php/pagelet/home/morestories.php*",
            "*://*.facebook.tld/ai.php*"
          ],
          "js": ["jquery-1.8.3.min.js", "allthefunctions.js"]
        }
      ]
}

In allthefunction.js I have the $.ajax calls, and in background.js is where I put the code above which however looks not to run..

In summary, I have not clear:

• What I should write in Here something happens
• If this strategy is going to work
• Where should I put this code?

Answer 1

Chrome changes the Set-Cookies header to be sent , i believe you want to send a Custom Cookie header for an HTTP request, because Set-Cookie header is sent by the server in response to an HTTP request, which is used to create a cookie on the user's system.

Please note all Cookie API() methods are asynchronous , ensure your call back drives your functionality;

I tried to replicate your workflow with this sample demonstration

Demonstration

Background page looks for all requests to http://www.w3schools.com/html/default.asp and modifies cookie details

background.js

// Adding Event Listener for Changing Cookie Details in Header
chrome.webRequest.onBeforeSendHeaders.addListener(function (details) {

    // Look for header details here
    detail = "requestHeaders";
    headers = details[detail];

    // Iterate through all headers information
    for (header in headers) {

        // Stop at Cookie Information
        if (headers[header].name == "Cookie") {

            // Do your desired functionality either modifying/delet cookies etc

            //chrome.cookies.get({url:"<your url>", name: "<your parameter>"}, function(Cookies){
            //console.log("Cookies  "+Cookies);
            return {
                requestHeaders: details.requestHeaders
            };
            //});


        }
    }

},
//Sample URL used
{
    urls: ["http://www.w3schools.com/html/default.asp"]
},

// Block Web Request and request for header information

['blocking', "requestHeaders"]);

allfunctions.js

Simple AJAX Call to an asp page

 //Do an AJAX Call
 function ajaxCall() {
     $.post("http://www.w3schools.com/html/default.asp", function (data) {
         console.log("POST Completed " + data);
     });
 }
 ajaxCall();

manifest.json

Ensured manifest has all permissions

{
  "name": "test-fb",
  "version": "1.0",
  "manifest_version": 2,
  "description": "testing",
  "permissions": [
    "cookies",
    "webRequest",
    "tabs",
    "<all_urls>",
    "webRequestBlocking" 
  ],    
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "js": ["jquery.js", "allthefunctions.js"]
        }
      ]
}

With this i was able to track request headers for AJAX Call and modify cookie information, let me know if you need more information.