Chrome Extension: How to redirect to a custom HTML page in response to specific web request?

Question

I\'d like to write an extension that redirects all web traffic to a specific domain, let\'s say wikipedia.org, to an intermediate page that says something like, \"Whoa,

Answer 1

You can create a content script that injects javascript code into each page that the user visits. In your content script you could have the js check the current url against invalid url's and redirect them accordingly.

I think content scripts load after the page has loaded so there may be a brief period where the user sees the page they were looking for and then gets redirected to your landing page. Check out the content script docs here: http://developer.chrome.com/extensions/content_scripts.html

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],
  ...
}

"matches" you should make the array of something similar to

"matches": ["http://www.*.com/*", "http://*.com/*, "https://www.*.com/*", "https://*.*.com/*]

and "js" would be the name of your javascript file that you want to use to write the injection into the page.

something like:

if(window.location == "http://wikipedia.com"){
     window.location.href = "http://mysplashpage.com";
}

Of course, that js won't work in all instances, for instance, if the user is trying to get to a directory of the target website. You will probably need to some regex checks or some other functions like protocol and host as defined here : http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

Answer 2

You can do this using webRequest feature, a background page, and custom page with yes and no buttons. For example, write something similar in the background page:

var URLStorage;

function interceptRequest(request)
{
  if(request && request.url)
  {
    if(request.type == "main_frame") // new page/site is loading in main window
    {
      if(request.url.indexOf("wikipedia.org") > -1)
      {
        URLStorage = request.url;
        return {redirectUrl: chrome.extension.getURL("confirmation.html")};
      }
    }
  }
}

chrome.webRequest.onBeforeRequest.addListener(interceptRequest, {urls: ["*://*/*"]}, ['blocking']);

This example does not strictly check if wikipedia is mentioned in domain, but I did this for clarity. In my real code a special class 'URL' is used which parses passed url and provides properties for every part of it, so they can be checked selectively.

In the confirmation.html just place 2 buttons, and bind them to an appropriate code, for example redirecting to requested site, if a user answered "yes".

$('#okbutton').click(function()
{
  document.location.href = chrome.extension.getBackgroundPage().URLStorage;
});

Don't forget to mention "webRequest" and "webRequestBlocking" in permissions section of your manifest.