Chrome 扩展：如何重定向到自定义 HTML 页面以响应特定的 Web 请求？答案

【问题标题】：Chrome Extension: How to redirect to a custom HTML page in response to specific web request?Chrome 扩展：如何重定向到自定义 HTML 页面以响应特定的 Web 请求？
【发布时间】：2012-11-14 07:11:09
【问题描述】：

我想编写一个扩展程序，将所有网络流量重定向到特定域，比如 wikipedia.org，到一个 intermediate 页面，上面写着“哇，小伙子。你”重新准备去维基百科。你确定吗？然后是 Yes 和 No 按钮。

如何响应特定的 URL 请求，并在满足成为域中带有“wikipedia.org”的页面的条件时将所需页面替换为自定义页面？

【问题讨论】：

标签： javascript html google-chrome redirect google-chrome-extension

【解决方案1】：

您可以创建一个内容脚本，将 javascript 代码注入用户访问的每个页面。在您的内容脚本中，您可以让 js 针对无效 url 检查当前 url 并相应地重定向它们。

我认为内容脚本会在页面加载后加载，因此用户可能会在短时间内看到他们正在寻找的页面，然后被重定向到您的目标网页。在此处查看内容脚本文档： 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": ["http://www.*.com/*", "http://*.com/*, "https://www.*.com/*", "https://*.*.com/*]

而“js”是您要用于将注入写入页面的 javascript 文件的名称。

类似：

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

当然，该 js 并不适用于所有情况，例如，如果用户试图访问目标网站的目录。您可能需要一些正则表达式检查或其他一些功能，如此处定义的协议和主机：http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

【讨论】：

您的匹配模式均无效。阅读documentation。我建议使用"run_at": "document_start"，以便在页面呈现之前发生重定向。

【解决方案2】：

您可以使用webRequest 功能、背景页面和带有yes 和no 按钮的自定义页面来执行此操作。比如在后台页面写类似的东西：

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']);

这个例子没有严格检查是否在域中提到了维基百科，但我这样做是为了清楚起见。在我的真实代码中，使用了一个特殊的类“URL”，它解析传递的 url 并为它的每个部分提供属性，因此可以有选择地检查它们。

在confirmation.html 中只需放置 2 个按钮，并将它们绑定到适当的代码，例如，如果用户回答“是”，则重定向到请求的站点。

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

不要忘记在清单的permissions 部分中提及“webRequest”和“webRequestBlocking”。

【讨论】：