How to implement a content security policy for an iframe in a chrome extension popup?

Question

Currently I have a chrome extension that on click opens a popup with an iframe in it.

The iframe currently references a local deployment thru http://localhost:5000. I've now set a content security policy in my apps index.js file (done thru express) via this line

res.setHeader('Content-Security-Policy', "frame-ancestors 'self' http://localhost:*/*");

ive also set the content-security-policy of the manifest.json like so

  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; frame-ancestors 'self' chrome-extension://randomletters/ http://localhost:5000/*; frame-src 'self' http://localhost:5000/*; child-src 'self' http://localhost:5000/*;",
    "sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';frame-ancestors 'self' http://localhost:5000/*;"
  }

however I still run into this error when trying to load the modal

Refused to frame 'chrome-extension://randomletters/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' chrome-extension://randomletters/ http://localhost:5000/*"

is there a layer of policy im missing? not sure why the chrome extension won't load when i've already added the url it says thats not allowed into the CSP...

this is how it is iframed in html (extension-content.html)

  <iframe id="myIframe" frameBorder="0" scrolling="no" src="https://www.heroku.app.com"></iframe>

and extension-content.js opens the iframe like this

  const message = {
    data: {
      screenX: window.screenX,
      screenY: window.screenY,
    },
    message: 'WINDOW_PARAMS'
  };
  const iframe = document.getElementById('myIframe');
  iframe.contentWindow.postMessage(message, '*');
}

to get to that logic, in background.js, i have this logic

  closeIframesInTabs(() => {});
  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    // tabs is an array of all currently open tabs, but only the active tab is at index 0
    const activeTab = tabs[0];
    if (!tabsWithIframes.hasOwnProperty(activeTab.id) && !activeTab.url.includes('chrome://')) {
      // Inject the content script
      chrome.scripting.executeScript({
        target: { tabId: activeTab.id },
        files: ["iframe-content/extension-side-panel.js"],
      }, () => {
        // Mark this tab as injected
        openExtension(activeTab);
      });
    } else {
      openExtension(activeTab);
    }
  });
});

where extension-side-panel is the parent file for two possible iframes, one of which is extension-content