如何使用 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)

那么...在這種情況下，有沒有辦法查看來自 time.com 的帶有 console.log 的請求？

我喜歡看到請求並且不需要在 Chrome 窗口上重定向。 我需要的只是請求在后台控制台中查看。

Answer 1

webRequest API提供重定向功能。

在 manifest.json 中添加webRequestBlocking 、 webRequest和主機權限：

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

對於頁面本身（攔截請求main_frame ）和iframe中（ sub_frame ）您要重定向的（那些應該“權限”如上圖所示聲明）的URL 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'
]);

要查看后台控制台，請在 chrome://extensions 頁面上打開它。

另外，請務必閱讀文檔中的擴展架構文章：背景頁面是一個完全獨立的頁面，與網頁無關，具有自己的上下文和自己的 URL，如 chrome-extension://blablabla/background.html無法導航到另一個 URL。