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

在 manifest.json 中添加扩展所需的权限，您可能不需要 webRequestBlocking，具体取决于您想要做什么。

...
"permissions": [
    "<all_urls>","webRequest","webRequestBlocking" 
  ],"background": {
    "scripts": ["background.js"],
    "persistent": true
}
...

在 manifest.json 文件中为您的扩展添加所需的权限后，请确保您点击了 更新按钮，如果这不起作用或浏览器没有更新按钮，则 重新安装扩展。

Answer 3

我刚刚在我的扩展程序中修复了这个问题：https://github.com/devinrhode2/tweet-bar 我需要做的是使用chrome.webRequest.onBeforeSendHeaders.addListener，但这也意味着添加webRequest, webRequestBlocking 权限.. 使用declarativeWebRequest 会更好，但这个项目对我来说并不重要。

关键点：

• 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 4

这是清单配置

"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/');
});