How to use iFrames in Chrome Extensions - Show Your Website Inside Another Website

Iframe elements can be very helpful and powerful when developing a Chrome extension

Video

Transcript

Iframe elements can be very helpful and powerful when developing a Chrome extension. For example, let's say that we want to display our website inside of a different website as part of our Chrome extension. Here is a quick snippet that shows how we create a container for the iframe, create an iframe, and inject it into the page.

Executing this code will successfully add the iframe of our page inside example .com. However, certain websites like Gmail, for example, will not allow that because of their content security policy that prohibits iframes from different origins to be displayed on this page.

But there is a workaround. This is a very simple Chrome extension that has a very simple manifest file and this page that has our website as an iframe inside of it. Now, instead of adding an iframe with our origin directly into the document of Gmail like this, you can see that the iframe with our origin is directly inside this document with Gmail origin.

However, if we inject the iframe with the Chrome extension URL, not our remote URL, let's see what will happen. We can see that our page is rendered fine, just like in the other example. And you can see if we move this container to the right a little bit, you can see these examples side by side.

This iframe was blocked, it's not rendered. However, this iframe that's nested inside of our Chrome extension iframe is rendered just fine. So this is a quick tip. If your Chrome extension needs to show a remote URL inside an iframe, it's a good idea to nest it inside another Chrome extension iframe that's always rendered.