Can I use the chrome extensions api to listen for source map requests?

Question

I'm trying to write a chrome extension to change the source map from which my page's source map is loaded. I hope to monitor the source map request initiated by chrome and add the Authorization request header to it to pass the security authentication of my source map server.

Unfortunately I discovered that I couldn't capture the source map request. I tried using declarativeNetRequest and webRequest.onBeforeSendHeaders as well as chrome.debugger's Fetch.enable api, but couldn't catch it. I can confirm that chrome initiated the request because I can see the request record in Charles.

Is there any way to capture the source map request? Or is there something wrong with my code?

My code is as follows:

// by declarativeNetRequest API
chrome.runtime.onInstalled.addListener(async function() {
  const existingRules = await chrome.declarativeNetRequest.getDynamicRules();
  chrome.declarativeNetRequest.updateDynamicRules({
    removeRuleIds: existingRules.map((rule) => rule.id),
    addRules: [
      {
        id: 1,
        action: {
          type: 'modifyHeaders',
          requestHeaders: [
            {
              header: 'Authorization',
              operation: 'set',
              value: 'xxx'
            }
          ]
        },
        condition: {
          urlFilter: 'my sourcemap url',
        }
      },
    ]
  });
})

chrome.declarativeNetRequest.onRuleMatchedDebug.addListener((e) => {
  console.log(e);
});

// by webRequest API
chrome.webRequest.onBeforeSendHeaders.addListener(
  function(details) {
      details.requestHeaders.push({ name: 'Authorization', value: 'xxx' });
    return { requestHeaders: details.requestHeaders };
  },
  { urls: ['my sourcemap url'] },
  ['requestHeaders']
);