Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Redirecting URL in a chrome extension

People also ask

How do I redirect a specific URL?

Click the URL Redirects tab. In the upper right, click Add URL redirect. In the right panel, select the Standard or Flexible redirect type. A standard redirect is used to redirect one URL to another.

Can you redirect any URL?

When you redirect a URL, you're simply forwarding it to another address on the same, or different domain. You can set up a redirect that sends visitors to your new domain name when they'll try to access a URL that belonged to your old domain.


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

List of Rules

  • Rule Type Cards

Rule Type Cards

  • New Redirect Rule

Creating a Redirect Rule

  • Headers Modification Rule

Modify Headers

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