3

I'm in the process of writing a chrome extension which displays some custom UI in multiple web pages via script injection. The script which I am injecting into the page appends some Dom items onto the document's body which can be interacted with by the user. The problem is, the items' styles are being affected by the page's css. I have solved this for the most part by applying css to each item as it's inserted into the dom.

$('item').css({....});

The problem with this is, I end up with huge blocks of styling that look like this:

$('.item').css({
            '-webkit-box-sizing' : 'border-box',
            'box-sizing' : 'border-box',
            'resize' : 'both',
            'overflow' : 'hidden',
            'position' : 'absolute',
            'padding-top' : '.2em',
            'padding-right' : '.2em',
            'padding-left' : '.2em',
            'padding-bottom' : '.4em',
            'opacity' : '.8',
            'background' : 'rgba(0,0,0,.5)',
            'background-image' : '-webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#111111))',
            'background-image' : '-webkit-linear-gradient(#444444, #111111)',
            'background-image' : 'linear-gradient(#444444, #111111)',
            'border-radius' : '4px',
            'box-shadow' : '3px 2px 4px 1px #111111',
        });
        this.$el.children(".default").css({
            'font-size':'medium',
            '-webkit-box-sizing' : 'border-box',
            'box-sizing' : 'border-box',
            'resize' : 'none',
            'overflow' : 'auto',
            'display' : 'inherit',
            'position' : 'relative',
            'padding' : '.25em',
            'width' : '100%',
            'height' : '90%',
            'background' : '#efefef',
            'border-radius' : '2px',
        });

This whole method is going to become a problem because:

  • First: any property which I don't apply here is applied to my items by the page's css, this changes the style and usability of my elements.
  • Second: I feel like this method is inefficient.
  • Third: My content script contains jquery and some others which i'm afraid will also interfere with the page and it's own version of these

Is there a better way to display these dom elements, inject these scripts, and style them? I would like as little clash with the parent page as possible. An idea that I came up with was covering the entire page in a transparent iframe and injecting everything into that, but I don't believe the items would display since the iframe would be transparent.

aclave1
  • 1,680
  • 18
  • 29

1 Answers1

4

First of all, as far as your consideration about interfering with the webpage's JS context is concerned, there is nothing to worry about since content scripts live in an isolated world:

Isolated worlds allow each content script to make changes to its JavaScript environment without worrying about conflicting with the page or with other content scripts. For example, a content script could include JQuery v1 and the page could include JQuery v2, and they wouldn't conflict with each other.

Another important benefit of isolated worlds is that they completely separate the JavaScript on the page from the JavaScript in extensions. This allows us to offer extra functionality to content scripts that should not be accessible from web pages without worrying about web pages accessing it.

Now, regarding the styling "interference" it is an actual problem, which I can think of 3 solutions for:

  1. Use inline element styling (i.e. what youhave been doing so far) and: a. Try to define as many properties as you can or at least the ones you really care about (and make sense for the underlying HTML). b. Accept the fact that there will be a slight chance of your elements getting affected by the wdbpages CSS.

  2. Use iframe's to embed each element. This is more "safe", but, if styling to the last detail isn't so important, this method would introduce unnecessary overhead.

  3. There is the (probably "proper"), high-end method of utilizing the Shadow DOM. (Take a look at this tutorial as well.)

Community
  • 1
  • 1
gkalpak
  • 47,844
  • 8
  • 105
  • 118
  • So in relation to isolated worlds, I'm using chrome.tabs.executeScript(tab,{file:""}) to execute one big file, which is not technically a content script correct? Does this also get the benefits of isolated worlds? Also, Your option 3 is pretty much exactly what I wanted and could be a viable solution. I read something about the shadow dom once but never saw any use for it until now. – aclave1 Dec 22 '13 at 17:59
  • 1
    Files or code injected using `chrome.runtime.executeScript()` are still considered content scripts and do live in the isolated world as well (it is easy to test for yourself). I first got aquainted with the Shadow DOM through RobW's **[`Display Anchors` extension](https://github.com/Rob--W/display-anchors)** (which I've been using daily since), so you could take look at the sources for an actual example of incorporating the "Shadow DOM" concept into a Chrome extension. – gkalpak Dec 22 '13 at 19:42