如何重定向谷歌浏览器扩展中的某些页面？

Question

我在我的 background 脚本中使用chrome.webRequest.onBeforeRequest 来监听用户发出的所有请求。我的扩展现在只是一个清单和这个 bg 脚本。

然后我检查 url 是否与正则表达式匹配：

chrome.webRequest.onBeforeRequest.addListener(
     checkRedirect, {urls: ["<all_urls>"]}, ["blocking"]
);

function checkRedirect(details) {   
    var location = getLocation(details.url);

    if(/some_regex/.test(details.url)) {
        var redirect_url = 'http://some_redirect.com' + location.pathname;
        chrome.tabs.update({url: redirect_url});
    }

    return {cancel: false}; 
}

function getLocation(href) {
    var l = document.createElement('a');
    l.href = href;
    return l;
};

因此，如果用户进入一个页面或点击该页面的链接，我想重定向他。 上面的代码几乎可以正常工作； 问题是页面请求时，例如CSS 然后这些 CSS 最终出现在用户屏幕上。

---

所以我想要的是只过滤对页面/点击的请求。如何做到这一点？

Answer 1

通过将types 设置为['main_frame'] 将事件通知限制在顶级框架（如果您还想包含框架，请使用['main_frame', 'sub_frame']）。

虽然前面的建议可以解决你的问题，但我建议更进一步，摆脱chrome.tabs.update。使用 redirectUrl 将之前的请求替换为重定向到所需的 URL。

如果您的 URL 模式匹配方法非常简单，可以表示为 match pattern，请将过滤器合并到 webRequest API 过滤器的 "urls" 键中。这将减少您的扩展程序对浏览器性能的影响。

chrome.webRequest.onBeforeRequest.addListener(function(details) {
    var location = getLocation(details.url); // getLocation defined in question
    var redirect_url = 'http://some_redirect.com' + location.pathname;
    return { redirectUrl: redirect_url };
}, {
    types: ['main_frame', 'sub_frame'],
    urls: ['*://*/*some_pattern*']
}, ['blocking']);

注意：如果您不准备处理非 http(s) 请求，请勿使用 <all_urls>。