chrome.webRequest不能正常工作？

Question

我想在我的擴展中實現chrome.webRequest API，但由於某種原因，無論我做什麼，它都無法正常工作。有人可以發佈使用示例嗎？或糾正我的錯誤？基本上我試圖做的是從響應中截獲接收到的頭文件。

這是onBeforeSendHeaders實現，但我想用OnHeadersRecieved以及 ：

var requestFilter = { 
    urls: [ "<all_urls>" ] 
    }, 
    // The 'extraInfoSpec' parameter modifies how Chrome calls your 
    // listener function. 'requestHeaders' ensures that the 'details' 
    // object has a key called 'requestHeaders' containing the headers, 
    // and 'blocking' ensures that the object your function returns is 
    // used to overwrite the headers 
    extraInfoSpec = ['requestHeaders','blocking'], 
    // Chrome will call your listener function in response to every 
    // HTTP request 
    handler = function(details) { 
    alert(details); 
    var headers = details.requestHeaders, 
     blockingResponse = {}; 

    // Each header parameter is stored in an array. Since Chrome 
    // makes no guarantee about the contents/order of this array, 
    // you'll have to iterate through it to find for the 
    // 'User-Agent' element 
    for(var i = 0, l = headers.length; i < l; ++i) { 
     if(headers[i].name == 'User-Agent') { 
     headers[i].value = '>>> Your new user agent string here <<<'; 
     break; 
     } 
     // If you want to modify other headers, this is the place to 
     // do it. Either remove the 'break;' statement and add in more 
     // conditionals or use a 'switch' statement on 'headers[i].name' 
    } 

    blockingResponse.requestHeaders = headers; 
    return blockingResponse; 
    }; 

chrome.webRequest.onBeforeSendHeaders.addListener(handler, requestFilter, extraInfoSpec); 

這是我的清單文件：

{ 
    "background_page": "iRBackground.html", 
    "browser_action": { 
     "default_icon": "Off.png", 
     "popup": "iRMenu.html" 
    }, 
    "content_scripts": [ { 
     "js": [ "Content.js" ], 
     "matches": [ "http://*/*" ], 
     "run_at": "document_start" 
    } ], 
    "description": "***", 
    "icons": { 
     "128": "On128x128.png", 
     "16": "On.png", 
     "48": "On48x48.png" 
    }, 
    "key": "****", 
    "manifest_version": 2, 
    "name": "***", 
    "permissions": [ "tabs", "notifications", "unlimitedStorage", "webRequest", 「webRequestBlocking」, 「<all_urls>」], 
    "update_url": "***/Chrome/UpdateVersion.xml", 
    "version": "1.3" 
} 

我從Chrome中得到的錯誤是： Uncaught TypeError: Cannot read property 'onBeforeSendHeaders' of undefined

任何人都可以看到任何錯誤？謝謝

Answer 1

那麼對於一個用法的例子，我可以給你這個工作代碼。我是這樣寫的，因爲另一種方式似乎倒退了，但這只是我個人的偏好，他們應該都是一樣的。

清單

{ 
    "name": "Chrome webrequest test", 
    "version": "0.1", 
    "description": "A test for webrequest", 
    "manifest_version": 2, 
    "permissions": [ 
    "<all_urls>","webRequest","webRequestBlocking" 
    ], 
    "background": { 
    "scripts": ["bgp.js"], 
    "persistent": true 
    } 
} 

bgp.js

chrome.webRequest.onBeforeSendHeaders.addListener(function(details){ 
    //console.log(JSON.stringify(details)); 
    var headers = details.requestHeaders, 
    blockingResponse = {}; 

    // Each header parameter is stored in an array. Since Chrome 
    // makes no guarantee about the contents/order of this array, 
    // you'll have to iterate through it to find for the 
    // 'User-Agent' element 
    for(var i = 0, l = headers.length; i < l; ++i) { 
    if(headers[i].name == 'User-Agent') { 
     headers[i].value = '>>> Your new user agent string here <<<'; 
     console.log(headers[i].value); 
     break; 
    } 
    // If you want to modify other headers, this is the place to 
    // do it. Either remove the 'break;' statement and add in more 
    // conditionals or use a 'switch' statement on 'headers[i].name' 
    } 

    blockingResponse.requestHeaders = headers; 
    return blockingResponse; 
}, 
{urls: [ "<all_urls>" ]},['requestHeaders','blocking']); 

Answer 2

我只是在我的擴展解決了這個問題在這裏：https://github.com/devinrhode2/tweet-bar 我需要什麼做的是使用chrome.webRequest.onBeforeSendHeaders.addListener，但是這也意味着在webRequest, webRequestBlocking權限中加入..會更好地使用declarativeWebRequest，但是這個項目不是那個impo rtant給我。

關鍵的東西：

• manifest.json "background": { "persistent": true,
• "permissions": [ "webRequest", "webRequestBlocking",

當您在manifest.json的這些變化，你實際上應該考慮重新安裝擴展，以確保公正的變化正在拾起。

這是我的過濾器代碼。你的不應該是完全相同的。看到這裏的文檔https://developer.chrome.com/extensions/webRequest

chrome.webRequest.onBeforeSendHeaders.addListener((req) => { 
    console.log('onBeforeSendHeaders'); 
    req.requestHeaders.forEach(function(header, index){ 
    console.log(header.name+':', header.value); 
    if (headers[header.name.toLowerCase()]) { 
     console.log('set header:'+header.name, 'to:'+headers[header.name.toLowerCase()]); 
     req.requestHeaders[index].value = headers[header.name.toLowerCase()] 
    } 
    }) 
    return {requestHeaders: req.requestHeaders}; 
},{ 
    urls: ['https://twitter.com/i/tweet/create'], 
    types: ["xmlhttprequest"] 
},[ 
    'blocking', 
    'requestHeaders' 
]); 

我還添加了這些頭我XHR請求，不傷害，讓你看起來更類似於正常的網站：

//add headers: 
    var headers = { 
    'content-type': 'application/x-www-form-urlencoded', 
    accept: 'application/json, text/javascript, */*; q=0.01', 
    origin: 'https://twitter.com', 
    referer: 'https://twitter.com/', 
    'x-requested-with': 'XMLHttpRequest' 
    }; 
    console.log('change') 
    Object.keys(headers).forEach((header) => { 
    postXhr.setRequestHeader(header, headers[header]); 
    }) 

Answer 3

這裏是配置清單

"permissions": [ 
    "webRequestBlocking" 
    ,"webRequest" 
    ,"http://*.beibei.com/*" 
], 
"background" : { 
    "page"  : "xxx.html", 
    "persistent" : true 
} 

這裏是JavaScript的演示代碼

$(function() { 
    // add event listners 
    chrome.webRequest.onBeforeRequest.addListener(
     function(details) { 
      console.log('onBeforeRequest', details); 
     }, 
     {urls: ["http://www.beibei.com/"]}, 
     [] 
    ); 

    chrome.webRequest.onBeforeSendHeaders.addListener(
     function(details) { 
      console.log('onBeforeSendHeaders', details); 
     }, 
     {urls: ["http://www.beibei.com/"]}, 
     ["requestHeaders"] 
    ); 

    chrome.webRequest.onCompleted.addListener( 
     function(details) { 
      console.log('onCompleted', details); 
     }, 
     {urls: ["http://www.beibei.com/"]}, 
     [] 
    ); 

    // do a GET request, so that relative events will be fired, need jquery here 
    $.get('http://www.beibei.com/'); 
});