Redirecting URL in a chrome extension
There are many options, the one more convoluted than the other.
- The
webRequest
API, specifically theonBeforeRequest
event. (Even better, the upcomingdeclarativeWebRequest
API). - Content scripts. Inject
location.replace('http://example.com')
in a page. - The
tabs
API. Use theonUpdated
event to detect when a page has changed its location, andchrome.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
- Redirect a request URL to another url.
- Block some requests.
- Replace some part in URL with another string
- 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 :)