I have a Chrome extension. On one of the extension pages I want to open an iframe where the source is not from the same source but from the extension page. I keep getting this error

Refused to display 'https://example.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

I understand why it is happening but when searching for a fix I run into an endless maze of “host-permissions”, “permissions”, “content-security-policy” on the manifest page. Which one am I supposed to use to fix this? I also cant figure out if I should be putting this block of code on my extensions js page or not?

const iframeHosts = [
  'example.com',
];
chrome.runtime.onInstalled.addListener(() => {
  const RULE = {
    id: 1,
    condition: {
      initiatorDomains: [chrome.runtime.id],
      requestDomains: iframeHosts,
      resourceTypes: ['sub_frame'],
    },
    action: {
      type: 'modifyHeaders',
      responseHeaders: [
        {header: 'X-Frame-Options', operation: 'remove'},
        {header: 'Frame-Options', operation: 'remove'},
        // Uncomment the following line to suppress `frame-ancestors` error
        // {header: 'Content-Security-Policy', operation: 'remove'},
      ],
    },
  };
chrome.declarativeNetRequest.updateDynamicRules({
    removeRuleIds: [RULE.id],
    addRules: [RULE],
 });
});

It was the second post on this question. Getting around X-Frame-Options DENY in a Chrome extension?
I am using and require a manifest version 3 solution.