Unable to display extension inside an iframe, injected in website's HTML

[anshuman srivastava]

Hi,
I am trying to make a chrome extension for my client and the requirement is to make the extension display inside an iframe and inject it into the website's HTML like Google Keep's chrome extension.

Currently, I am using Angular 15. The problem is that I cannot inject my extension inside the website's HTML; when I inspect it, only my extension's HTML is visible in the elements section. Also, the above iframe is not enclosed inside an HTML and body tag but mine was. It's also not clear which framework they are using or if is it just javascript

Any help or suggestion would be appreciated.

Regards,
Anshuman

[Deco]

The Google Keep extension does not inject inside webpages - it reads from websites, into the extension.

You cannot inject contents in websites which are on separate iframe domains as this violates CORS, your host will need to be the same for this to work.

Cheers,

Deco

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/742b9b90-3834-4532-9724-d1d8f2543a32n%40chromium.org.

[wOxxOm]

>  You cannot inject contents in websites which are on separate iframe domains as this violates CORS, your host will need to be the same for this to work

Extensions can trivially add a content script that runs in a cross-origin frame, then add anything they want.

>  The problem is that I cannot inject my extension inside the website's HTML; when I inspect it, only my extension's HTML is visible in the elements section

You need to do it in the content script. Simply add an iframe element and set its src to chrome.runtime.getURL('iframe.html') where iframe.html must be exposed in web_accessible_resources. Don't forget to reload the extension after editing a content script or manifest.json.

Here's a random example: https://stackoverflow.com/questions/70867944/create-iframe-using-google-chrome-extension-manifest-v3

[anshuman srivastava]

Thank You for the help. 

It is working now but the content is still blocked by chrome.

[wOxxOm]

It's unclear what's "working" and what's "blocked", your description is too vague, so maybe you can upload your extension somewhere and share the link here so that someone looks at the source code, or maybe just show all relevant code here.

[anshuman srivastava]

Sorry for being vague. My extension was working inside an iframe but the content was blocked by chrome. It was a mistake on my end, I did not mention the web_accessible_resources in the manifest file. Thanks for the reply, really appreciate it. For now, everything seems to be working fine.

Regards,