URL forwarding using Chrome webRequest after response is received

Question

I am attempting to create a Chrome extension that utilizes Chrome's webRequest module to perform a redirect to a URL obtained from an initially accessed URL. For this I would like to utilize only Chrome's webRequest functions (e.g., onBeforeSendHeaders, onHeadersReceived) and not simply perform a call to $.ajax() with the obtained URL. The desired functionality is:

1. User enters a URL in the address bar
2. A request is made and the secondary URL is extracted from the HTTP response
3. The chrome.webRequest.onHeadersReceived handler redirects the user to this secondary URL using the redirectUrl attribute of a blocking response.

My attempt at accomplishing this is:

chrome.webRequest.onHeadersReceived.addListener(
 function(details){
  var secondaryURL = extractSecondaryURL(details);
  return {redirectUrl: secondaryURL}; //this doesn't work
 },
 {urls:["http://*/*", "https://*/*"]},
 ["blocking","responseHeaders"]
);

...but the page is never forwarded. The webRequest documentation says, "Only used as a response to the onBeforeRequest event." about the redirectUrl attribute, which is the likely culprit.

How does one perform this sort of forwarding using data received from the response headers and the Chrome webRequest module?

Answer 1

web request API Methods

• onBeforeRequest allows cancelling or redirecting a request
• onBeforeSendHeaders, onHeadersReceived allows cancelling a request or modifying headers
• onAuthRequired allows providing\modifying authentication credentials.

So, idea is to store the secondary URL from onHeadersReceived Event and fire a chrome.tabs.reload() event which fires onBeforeRequest event again which helps in redirecting.

Sample Demonstration

The following untested :) demonstration blocks all Facebook URL's and redirects them to Google upon receiving secondary URL, you can customize it further.

References

• Web request
• Background Page
• Manifest File

manifest.json

Ensure all permissions are available and register background page with extension.

{
  "name": "Hanlder for Navigation",
  "description": "http://stackoverflow.com/questions/16928912/url-forwarding-using-chrome-webrequest-after-response-is-received",
  "version": "1",
  "manifest_version": 2,
  "background": {
    "scripts": ["background.js"]
  },
  "permissions":["https://www.facebook.com/*","webRequest","webRequestBlocking","tabs"]
}

background.js

This code blocks all URL request to Facebook and redirects them to Google.

var _redirectURL = "";
// Register an event listener which 
//traces all requests before being fired
chrome.webRequest.onBeforeRequest.addListener(function (details) {
    if (_redirectURL != "") {
        return {
            redirectUrl: "http://www.google.co.in/" /*Redirection URL*/
        };
    }
}, {
    urls: ["*://www.facebook.com/*"] /* List of URL's */ * *
}, ["blocking"]); // Block intercepted requests until this handler has finished
chrome.webRequest.onHeadersReceived.addListener(function (details) {
    if (_redirectURL == "") {
        var secondaryURL = extractSecondaryURL(details);
        _redirectUrl = secondaryURL;
        chrome.tabs.reload();
    }
}, {
    urls: ["http://*/*", "https://*/*"]
}, ["blocking", "responseHeaders"]);

Output

All request(s) to Facebook are redirected to Google.