Inject Iframe

[Natan Rotta]

Hello guys. I need to inject an Iframe into the current tab. This Iframe should occupy about 30% of the screen in the right field. How can you do that?

[Stefan vd]

Hi there,

You can use this script code to place the iframe element in the current tab, for example:
Manifest V3 Chrome extension

run.js

        const newDiv = document.createElement("iframe");
        newDiv.src = "https://www.google.com";
        newDiv.style.width = "30%";
        newDiv.style.height = "100vh";
        newDiv.style.position = "absolute";
        newDiv.style.top = "0";
        newDiv.style.right = "0";
        newDiv.style.zIndex = "1000";
        newDiv.innerText = "Element";
        document.body.appendChild(newDiv);

background.js

        chrome.action.onClicked.addListener(function(tab){

        chrome.scripting.executeScript({

        target: {tabId: tab.id},

        files: ["js/run.js"]

        });

        });

Thanks,
Stefan vd

[Natan Rotta]

Hey, Stefan! Thanks!

I built a project model using the injection strategy.
This one uses React.js as a base.

 Follow my repository: https://github.com/natanrotta/react-chrome-extension-boilerplate

[Stefan Van Damme]

Hi there,

Great.

Thanks,

Stefan