I'm trying to send a message from my service worker to my content script which contains the headers of certain request using chrome.webRequest.onBeforeSendHeaders. I can see the request being made in the network tab, but when I try to log the message to the console in my content script it doesn't show up.
manifest.json:
{
  ...,
  "content_scripts": [
    {
      "matches": ["https://example.com/*"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "tabs",
    "webNavigation",
    "webRequest"
  ]
}
background.js:
async function getCurrentTab() {
  let [tab] = await chrome.tabs.query({active: true, lastFocusedWindow: true});
  return tab;
}
chrome.webRequest.onBeforeSendHeaders.addListener(
  async (details) => {
    let tab = await getCurrentTab();
    chrome.tabs.sendMessage(tab.id, 
      {message: "request_headers", payload: details.requestHeaders}
    );
  },
  {urls: ["https://api.example.com/resource.json"]},
  ['requestHeaders']
);
content script:
chrome.runtime.onMessage.addListener(
  (request, sender, sendResponse) => {
    if (request.message === "request_headers") {
      console.log(request.payload);
    }
  }
);
