chrome.webRequest不起作用？

Question

我正在尝试在我的扩展中实现chrome.webRequest API，但是无论我做什么都不起作用。有人能提供一个使用示例吗？或者纠正我的错误？基本上我想要做的是拦截响应中接收到的标头。

这是onBeforeSendHeaders的实现方式，但我也想使用OnHeadersReceived:

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。请问有人发现了什么问题吗？谢谢。

- user1326293

---

webRequest API 仅限于扩展程序的进程（例如后台/事件页面）使用。 - Rob W

这段代码片段是写在我的后台页面中的。 - user1326293

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']);

- BeardFist

---

嗨，我创建了一个包含两个文件的文件夹：manifest.json和bgp.js，并分别输入了您提供的数据，并将它们作为未打包的扩展程序加载。后来我尝试了代码，但它没有起作用，然后我尝试在bgp.js中插入一些alert（）但也没有触发任何东西...你有什么想法我做错了什么吗？ - user1326293

@user1326293 这正是我所拥有的，并且它完美地运行着。在这里，我将文件放入了一个 zip 中。解压缩后再试一次。扩展控制台中是否有任何消息？ - BeardFist

@user1326293 那其实就是我接下来要问的问题。很高兴你解决了它。 - BeardFist

我已经弄清楚如何编辑Content-Length了。http://stackoverflow.com/questions/29789841/can-i-inject-a-content-length-header-into-chrome - the4tress

请将"<all_urls>"替换为您需要的内容，比如*://*/*。 - Peter Rader

Answer 2

我刚刚在我的扩展程序中修复了这个问题：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]);
  })

- Devin Rhode

---

"...你应该考虑重新安装扩展程序，以确保更改被正确识别。" 重新安装扩展程序对我很有帮助，谢谢！ - Code Apprentice

Answer 3

在manifest.json中添加扩展所需的权限，根据您想要做什么，您可能不需要webRequestBlocking。

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

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

- ehab

---

谢谢！在添加所需权限后，我没有更新扩展程序。 - skygate

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

- Lyfing