Embedding web app into iframe issue

[Artem API]

I’m trying to embed my Next.js web app, which uses Supabase, into my Chrome extension’s iframe. While the extension successfully opens the website and displays the UI, the web app isn’t able to fetch any data.

To troubleshoot, I tried embedding the same web app in a brand-new Next.js project, and in that case, the iframe worked and fetched data without any issues.

It seems the problem lies with the Chrome extension’s iframe, which is unable to fetch data from my app.

my manifest v3:

 "background": { "service_worker": "static/background/index.js" },

  "chrome_url_overrides": { "newtab": "newtab.html" },

  "side_panel": { "default_path": "sidepanel.html" },

  "permissions": [

    "storage",

    "sidePanel",

    "cookies",

    "alarms",

    "tabs",

    "notifications",

    "activeTab",

    "tabGroups",

    "bookmarks",

    "declarativeNetRequest",

    "declarativeNetRequestWithHostAccess"

  ],

  "host_permissions": ["*://*/*"],

  "incognito": "spanning",

  "content_security_policy": {

    "extension_pages": "script-src 'self' http://localhost;object-src 'self';"

  },

  "web_accessible_resources": [

    { "matches": ["<all_urls>"], "resources": ["__plasmo_hmr_proxy__"] }

  ]

my iframe

 <div style={{ width: '100%', height: '100%' }}>

      <iframe

        src='http://localhost:3000/dashboard'

        style={{ width: '100%', height: '100%', border: 'none' }}

        title='Dashboard'

        allow='clipboard-read; clipboard-write; picture-in-picture; encrypted-media'

      ></iframe>

    </div>

Any suggestions?