Menu
I'm working on a Chrome Extension that allows a user to open a site into an iframe in a new tab. My goal is to allow them to modify the CSS by injecting the code via JavaScript from the parent window, yet I'm getting blocked by origin-only issues.
Is there a way around this? I know I've seen other extensions do similar things.
829
It is called an inline frame because to the user it is all one web page. The child iframe is a complete browsing environment within the parent frame. It can load its own JavaScript and CSS separate from the parent. They can also be refreshed and loaded asynchronously from the parent site.
If you have a web application already, and would like to build a chrome extension for it - using iframes is an amazing tool. You can just inject an iframe of that web app in any page instead of re-implementing the whole UI from ground up.
Google Chrome now supports lazy loading iframes for speeding up page loads.
How to identify the iframe: Right click on the element, If you find the option like 'This Frame' then it is an iframe. Right click on the page and click 'View Page Source' and Search with the 'iframe', if you can find any tag name with the 'iframe' then it is meaning to say the page consisting an iframe.
I believe what you are looking for is the
chrome.tabs.executeScript
with allFrames set to true
Documentation can be found here https://developer.chrome.com/extensions/tabs#method-executeScript
This will allow you to inject a content script into a page and all iFrames in that page. There is also a similar function for injecting CSS : )
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
