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

admin管理员组

文章数量:1305060

I'd like to write an extension that redirects all web traffic to a specific domain, let's say wikipedia, to an intermediate page that says something like, "Whoa, bub. You're about to go to Wikipedia. Are you sure about this?" followed by Yes and No buttons.

How do I respond to a specific URL request and replace the desired page with a custom one when it meets the condition of being a page with "wikipedia" in the domain?

I'd like to write an extension that redirects all web traffic to a specific domain, let's say wikipedia, to an intermediate page that says something like, "Whoa, bub. You're about to go to Wikipedia. Are you sure about this?" followed by Yes and No buttons.

How do I respond to a specific URL request and replace the desired page with a custom one when it meets the condition of being a page with "wikipedia" in the domain?

• javascript
• html
• google-chrome
• http-redirect
• google-chrome-extension

Share Improve this question Follow edited Jul 10, 2017 at 21:29 user456584 asked Nov 26, 2012 at 18:43 user456584user456584 89k1616 gold badges7979 silver badges108108 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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") > -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.

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./extensions/content_scripts.html

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

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

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

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."){
     window.location.href = "http://mysplashpage.";
}

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./snippets/javascript/get-url-and-url-parts-in-javascript/

本文标签：