2

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:

  1. 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.

  2. 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.

tanushree
  • 763
  • 1
  • 7
  • 20
  • 1
    Scoped CSS might be a way to solve this: http://stackoverflow.com/questions/13123044/twitter-bootstrap-css-clashes-while-in-chrome-extensions – QFDev May 16 '13 at 15:41
  • Thanks - this is very useful to know. But the issue that I am talking about is sort-of the other way around. Scoped CSS allows you to apply CSS to a DOM element and its children only (and not parents), but I need to ensure that CSS from the parent web page does not get applied to the inserted extension UI elements. While applying specific styles is helpful in this case, it is helpful only to an extent because as I said, depending on the web page, any attribute of any element could have been modified. – tanushree May 16 '13 at 16:03
  • 1
    There's a similar question here, with some informative answers: http://stackoverflow.com/questions/3540927/how-do-i-prevent-css-interference-in-an-injected-piece-of-html I had a similar problem a few weeks back, although for me the injected HTML was only running on 10 websites so I could filter out the interference using minimal additions to my CSS. – QFDev May 16 '13 at 16:12
  • Thanks for sharing that. It had a couple other questions linked which were directly relevant too. 10 websites sounds somewhat reasonable :) – tanushree May 16 '13 at 16:27
  • Adding this question here as it's related as well http://stackoverflow.com/questions/3529513/is-there-a-way-to-sandbox-an-html-block-away-from-its-pages-css-without-using – tanushree May 16 '13 at 16:32

0 Answers0