Question

我想编写一个扩展程序，将所有网络流量重定向到特定域名，例如wikipedia.org，转到中间页面，上面写着“哇哇，小家伙。你”我要去维基百科了。你确定吗？“然后是是和否按钮。

如果在域中遇到“wikipedia.org”页面的条件，我如何回复特定的URL请求并用自定义页面替换所需的页面？

Answer 1

您可以使用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”。

Answer 2

您可以创建一个内容脚本，将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/

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

2 个答案: