如何使用 Chrome 的 declarativeWebRequest 更改 http 响应标头答案

【问题标题】：How to use Chrome's declarativeWebRequest for changing http response headers如何使用 Chrome 的 declarativeWebRequest 更改 http 响应标头
【发布时间】：2012-12-18 18:47:47
【问题描述】：

我正在尝试编写一个简单的 Chrome 扩展程序，它使用 declarativeWebRequest 替换 http 响应中的 Content-Type 标头（目前处于测试阶段；我使用的是 25.0.1364.0）。

代码是基于Catifier的例子，这里我改了registerRules的方法：

var RequestMatcher = chrome.declarativeWebRequest.RequestMatcher;
var RemoveResponseHeader = chrome.declarativeWebRequest.RemoveResponseHeader;
var AddResponseHeader = chrome.declarativeWebRequest.AddResponseHeader;

function registerRules() {
  var changeRule = {
    priority: 100,
    conditions: [
      // If any of these conditions is fulfilled, the actions are executed.
      new RequestMatcher({
        contentType: ['audio/mpeg']
      }),
    ],
    actions: [
      new RemoveResponseHeader({name: 'Content-Type'}),
      new AddResponseHeader({name: 'Content-Type', value: 'application/octet-stream'}),
      new AddResponseHeader({name: 'X-ChromeExt-Content-Type', value: 'trap'})
    ]
  };

  var callback = function() {
    if (chrome.extension.lastError) {
      console.error('Error adding rules: ' + chrome.extension.lastError);
    } else {
      console.info('Rules successfully installed');
      chrome.declarativeWebRequest.onRequest.getRules(null,
          function(rules) {
            console.info('Now the following rules are registered: ' +
                         JSON.stringify(rules, null, 2));
          });
    }
  };

  chrome.declarativeWebRequest.onRequest.addRules(
      [changeRule], callback);
}

从某种意义上说，它工作正常，规则已注册，我从浏览器控制台得到以下反馈：

Now the following rules are registered: [
  {
    "actions": [
      {
        "instanceType": "declarativeWebRequest.RemoveResponseHeader",
        "name": "Content-Type"
      },
      {
        "instanceType": "declarativeWebRequest.AddResponseHeader",
        "name": "Content-Type",
        "value": "application/octet-stream"
      },
      {
        "instanceType": "declarativeWebRequest.AddResponseHeader",
        "name": "X-ChromeExt-Content-Type",
        "value": "trap"
      }
    ],
    "conditions": [
      {
        "contentType": [
          "audio/mpeg"
        ],
        "instanceType": "declarativeWebRequest.RequestMatcher"
      }
    ],
    "id": "_0_",
    "priority": 100
  }
]

问题是代码实际上并没有产生任何效果，即http响应头保持不变。我不确定这是否与（仍然未修复的）bug in Chrome 不显示更改的标题有关。但无论如何，我有以下问题：

1) 上述RequestMatcher 是否正确应用于contentType，或者我应该为responseHeaders 使用匹配器（以某种方式指出Content-Type）？

2) 如果RequestMatcher 应该应用于responseHeaders，那么这样的规则的语法是什么？

new RequestMatcher({
  responseHeaders: // what to place here to match a value in a specific header line?
  // or possibly responseHeaders['Content-Type']: ...?
})

3) 如何调试规则执行？我的意思是我想跟踪和分析条件是如何处理的，以及操作是如何执行的。如果没有这个使用declarativeWebRequest 将是一个难题，恕我直言。

提前致谢。

【问题讨论】：

标签： javascript google-chrome-extension httpresponse

【解决方案1】：

1）我尝试了以下代码（与您的几乎相同，只是它将内容类型从 text/html 修改为 text/plain）

chrome.declarativeWebRequest.onRequest.addRules([{
    priority: 100,
    conditions: [
      // If any of these conditions is fulfilled, the actions are executed.
      new chrome.declarativeWebRequest.RequestMatcher({
        contentType: ['text/html']
      }),
    ],
    actions: [
      new chrome.declarativeWebRequest.RemoveResponseHeader({name: 'Content-Type'}),
      new chrome.declarativeWebRequest.AddResponseHeader({name: 'Content-Type', value: 'text/plain'}),
      new chrome.declarativeWebRequest.AddResponseHeader({name: 'X-ChromeExt-Content-Type', value: 'trap'})
    ]
  }])

它奏效了！不过，修改并未反映在 DevTools 中。

2）根据https://developer.chrome.com/trunk/extensions/declarativeWebRequest.html#type-HeaderFilter，你应该使用

new RequestMatcher({
  responseHeaders: [{nameEquals: "Content-Type", valueContains: "audio/mpeg"}]
})

~~但它没有用（我做错了吗？？）。~~ 使用 valueContains 而不是 valueEquals，因为 Content-Type 可能包含编码。

3) 除非您自己调试 Chrome，否则似乎无法做到这一点。

我在 Chromium 25.0.1363.0（内部版本 173419）上进行了测试

【讨论】：