javascript - 如何使用 chrome.webRequest API 重定向 URL？

Question

背景.js:

chrome.webRequest.onBeforeRequest.addListener(function (details) {
    console.log(details.url);
    window.location.href = 'http://time.com/';
}, {urls: ['<all_urls>']}, []);

当我访问网站时，它会在控制台中显示所有请求，但不会将网站重定向到 time.com。

附加信息:

我在后台控制台出现错误:

Error in event handler for webRequest.onHeadersReceived/1: ReferenceError: url is not defined at chrome.webRequest.onHeadersReceived.addListener.urls (chrome-extension://hkiajgmcjicgampfdeiiacbojlmdokob/background.js:5:8)

那么...在这种情况下，有没有办法通过 console.log 查看来自 time.com 的请求？

我喜欢看到请求，不需要在 Chrome 窗口上重定向。我需要的只是在后台控制台中查看的请求。

Answer 1

webRequest API提供重定向功能。

在manifest.json中添加webRequestBlocking、webRequest和host权限:

"permissions" : [
    "webRequest",
    "webRequestBlocking",
    "http://www.example.com/*" /* or <all_urls> */
],
"background": {
    "scripts": ["background.js"]
}

在要重定向的 URL 上拦截对页面本身 (main_frame) 和 iframe (sub_frame) 的请求(这些应该在上面显示的“权限”中声明)在 blocking 监听器中:

chrome.webRequest.onBeforeRequest.addListener(function(details) {
    console.log(details.url);
    if (!details.url.startsWith('http://time.com/')) {
        return {redirectUrl: 'http://time.com'};
    }
}, {
    urls: ['http://www.example.com/*'], // or <all_urls>
    types: ['main_frame', 'sub_frame'],
}, [
    'blocking'
]);

查看后台控制台，open it on chrome://extensions page .

此外，请务必阅读 extensions architecture文档中的文章:背景页面是一个完全独立的页面，与网页无关，具有自己的上下文和自己的 URL，如 chrome-extension://blablabla/background.html，无法导航到另一个 URL。