javascript - 如何使用 Chrome 的 declarativeWebRequest 来更改 http 响应 header

Question

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

该代码基于 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 不显示更改的 header 有关。但无论如何，我有以下问题:

1) 上面提到的 RequestMatcher 是否正确应用于 contentType 还是我应该为 responseHeaders 使用匹配器(以某种方式指出 >内容类型)?

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 将是一个难题，恕我直言。

提前致谢。

Answer 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'})
    ]
  }])

成功了!但是，修改不会反射(reflect)在 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)上进行了测试