I am developing a chrome extension that is meant to work on all web pages. As part of its functionality, it needs to show a UI on any given page.
Currently, to do this, I append a div (containing the UI HTML) to the page from the content script. The issue with this is that the styles of the containing page get applied to the extension's UI, causing it to look different on different webpages.
Two approaches to fixing this issue:
Apply specific styles (marked as !important) for the extension's UI elements. This is really hard because depending on the page, any attribute of any element can have a different value.
Add this UI to an iframe, and insert that to the page. This of course, fixes the CSS issues with approach 1. But I haven't worked much with iframes in the context of extensions before and I'm wondering if there are any concerns that I should be aware of.
Some of the potential issues that come to mind: 1. There can be complexities in the content script interacting with the iframe js. 2. Some users might have iframes disabled at the browser level for specific or all sites?
Generally, the use of iframes is frowned upon, for reasons of security and performance (among others). I am wondering if in this scenario, using an iframe is the most sensible option?
Also, I intend to port the extension to Firefox later. This is probably not relevant, but just putting it out there in case it helps tilt the decision.
