能否用Chrome扩展API监听Source Map请求并添加认证头？

Source Map请求是Chrome解析脚本时内部发起的请求，不属于网页上下文（如fetch/XHR）发起的请求，这是你用常规API无法捕获的核心原因。以下是可行的解决方案：

核心问题说明 #

Chrome的webRequest和declarativeNetRequest默认只拦截网页主动发起的请求，而Source Map请求属于浏览器内部逻辑触发的请求，需要额外配置才能匹配。

解决方案1：使用webRequest API捕获 #

关键配置要求 #

• 必须在manifest.json中声明webRequest、webRequestBlocking、extraHeaders权限，以及目标Source Map的域名权限
• 监听时需要添加extraHeaders到权限数组，同时用通配符覆盖所有Source Map请求路径

修正后的代码 #

chrome.webRequest.onBeforeSendHeaders.addListener(
  function(details) {
    // 避免重复添加Authorization头
    const hasAuthHeader = details.requestHeaders.some(h => h.name.toLowerCase() === 'authorization');
    if (!hasAuthHeader) {
      details.requestHeaders.push({ name: 'Authorization', value: 'xxx' });
    }
    return { requestHeaders: details.requestHeaders };
  },
  { urls: ['*://*.your-sourcemap-domain.com/*.map*'] }, // 用通配符匹配所有Source Map请求
  ['blocking', 'requestHeaders', 'extraHeaders'] // 必须包含extraHeaders
);

对应manifest.json权限 #

{
  "permissions": ["webRequest", "webRequestBlocking", "extraHeaders"],
  "host_permissions": ["*://*.your-sourcemap-domain.com/*"]
}

解决方案2：使用declarativeNetRequest API修改 #

关键配置要求 #

• 在规则的condition中指定resourceTypes: ['other']，因为Source Map请求属于other类型资源，默认规则不会包含该类型
• 确保manifest中声明declarativeNetRequest权限和对应域名权限

修正后的代码 #

chrome.runtime.onInstalled.addListener(async function() {
  const existingRules = await chrome.declarativeNetRequest.getDynamicRules();
  await chrome.declarativeNetRequest.updateDynamicRules({
    removeRuleIds: existingRules.map(rule => rule.id),
    addRules: [
      {
        id: 1,
        action: {
          type: 'modifyHeaders',
          requestHeaders: [
            {
              header: 'Authorization',
              operation: 'set',
              value: 'xxx'
            }
          ]
        },
        condition: {
          urlFilter: '*://*.your-sourcemap-domain.com/*.map*',
          resourceTypes: ['other'] // 核心：指定资源类型为other
        }
      }
    ]
  });
});

chrome.declarativeNetRequest.onRuleMatchedDebug.addListener(e => {
  console.log('规则匹配成功:', e);
});

对应manifest.json权限 #

{
  "permissions": ["declarativeNetRequest"],
  "host_permissions": ["*://*.your-sourcemap-domain.com/*"]
}

验证要点 #

• 确认URL过滤规则准确：用通配符*.map*匹配所有Source Map请求，避免硬写固定URL导致匹配失败
• 检查Chrome版本：extraHeaders要求Chrome 79+，declarativeNetRequest的resourceTypes支持要求Chrome 84+
• 开启扩展调试模式：在chrome://extensions/页面打开开发者模式，查看扩展后台日志，确认规则是否加载成功

内容的提问来源于stack exchange，提问作者Xeikim