Redirecting URL in a chrome extension

Question

There are many options, the one more convoluted than the other.

1. The webRequest API, specifically the onBeforeRequest event. (Even better, the upcoming declarativeWebRequest API).
2. Content scripts. Inject location.replace('http://example.com') in a page.
3. The tabs API. Use the onUpdated event to detect when a page has changed its location, and chrome.tabs.update to change its URL. Avoid an infinite loop though!

The first one is the best one, because it is activated before a page is even requested. The second one can be activated after the request has been fulfilled, but before the page is rendered ("run_at":"document_start") or after it's rendered ("run_at":"document_end"). I mentioned the last one for completeness, but you shouldn't use it, because the other options are way better.

Here's an example using the webRequest API, a simple extension which allows me to browse pages on the Pirate bay, even though the main hosts are taken down by my ISP (the actual list of URLs is much longer, but I have omitted them for the sake of the example).
See match patterns for an explanation on the URL formats.

manifest.json

{
  "name": "The Pirate Bay",
  "description": "Redirect The Pirate Bay to a different host",
  "version": "1.0",
  "manifest_version": 2,
  "background": {"scripts":["background.js"]},
  "permissions": [
    "webRequest",
    "*://thepiratebay.se/*",
    "*://www.thepiratebay.se/*",
    "webRequestBlocking"
  ]
}

background.js

var host = "http://tpb.pirateparty.org.uk";
chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
         return {redirectUrl: host + details.url.match(/^https?:\/\/[^\/]+([\S\s]*)/)[1]};
    },
    {
        urls: [
            "*://piratebay.se/*",
            "*://www.piratebay.se/*"
        ],
        types: ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"]
    },
    ["blocking"]
);

I know I am a bit late in the game to answer this question Still I would like to answer this for future readers. Have a look at

Requestly - A Chrome Extension to modify Network Requests.

Currently, You can setup rules for

1. Redirect a request URL to another url.
2. Block some requests.
3. Replace some part in URL with another string
4. Modify Headers (Add/Remove/Modify Request and Response Headers)

Screenshots for more understanding:

• List of Rules

• Rule Type Cards

• New Redirect Rule

• Headers Modification Rule

There are lot of things in roadmap to be covered in requestly like

• Switching User Agents

.. and a lot more.

PS: I have created this So you can blame me if you do not find this helpful :)