2

I am building a chrome extension in which I insert a div into webpage's body and set it's CSS position to fixed so that it floats over the page.

However, the host page's CSS gets applied over the div I am inserting and I don't want that to happen. How can I avoid that?

I tried applying normalize.css to get rid of the css being applied by host page but that doesn't seem to work.

Jatin
  • 14,112
  • 16
  • 49
  • 78
  • possible duplicate: http://stackoverflow.com/q/7846052/588079 Also, have you tried inline styles (or using the style attribute using javascript)? – GitaarLAB Dec 22 '13 at 07:15
  • I haven't tried inline styles. Will have a look. Although, I will have to insert those into that head of host page, right? Not sure how to do that. Will try the above answer, too. – Jatin Dec 22 '13 at 07:18
  • The above code does work but it removes all the styling, including the styles I was applying! – Jatin Dec 22 '13 at 07:38

2 Answers2

1

As far as I know, there are three solutions, the first one being ideal:

Put your content into an iframe. The parent's css won't apply inside of it. Demo here (click).

Reset every css style on your element and all of its children. See this answer (click).

Use inline styles all the way.

Community
  • 1
  • 1
m59
  • 43,214
  • 14
  • 119
  • 136
  • I need to interact with the host page. So, I think the iFrame option won't work. – Jatin Dec 22 '13 at 07:21
  • @Jatin I found that link and I made a demo of the iframe solution. See my update. – m59 Dec 22 '13 at 08:05
  • I tried the iframe method in my extension. Can't seem to get it to work. I basically need an angular.js app inside that iframe but angular's not working, seems like iframe can't access the scripts I want it to access. – Jatin Dec 22 '13 at 10:21
  • @Jatin that also can be done, but it's off topic for this post. I'd be glad to help if you make a question with all of the details about the iframe and scripts. Post the link to the question and I'll give it a go. – m59 Dec 22 '13 at 17:18
  • I got it working in the iframe! Thanks for your help! Appreciate it! :) – Jatin Dec 24 '13 at 05:15
0

Another trick is to write a small function that tries to create an unique ID (or classname) (essentially, check if the ID exists, if so, increment an appended number), then add an inline style-script that normalizes that specific div and all of it's children and finally add your div with this unique ID (or classname).

Example:

function addDiv(){
  var uId = (function(){
              for(var r='myUniqueId', i=1; document.getElementById(r+i); i++);
              return r+i;
            })()
  ,   div = document.createElement('div')
  ;

  document.getElementsByTagName('head')[0]
          .appendChild(document.createElement('style'))
          .innerHTML = '#'+uId+ '{background-color:red;}'     //just as example
                     + '#'+uId+ ' .test{background-color:yellow;}';  
  div.id=uId;
  document.getElementsByTagName('body')[0]
          .appendChild(div)
          .innerHTML='<p class="test">foo</p> <br> bar';  //just as example
}

Working jsfiddle here

GitaarLAB
  • 14,536
  • 11
  • 60
  • 80