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，但这个项目对我来说并不重要。

关键词：

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

Answer 4

在manifest.json中添加扩展所需的权限，根据您要执行的操作，您可能不需要webRequestBlocking。

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

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

chrome.webRequest无法正常工作？

4 个答案: