6

I am developing a chrome extension that injects a button onto a page. When this button is clicked, it launches a twitter bootstrap modal. However, the css that is injected with the twitter bootstrap is affecting the pages themselves and I only want them to affect the modal divs. How can I achieve this?

Thank you!

d9120
  • 511
  • 1
  • 7
  • 23

2 Answers2

1

There is only one true way to do that and it involves LESS

See this answer: https://stackoverflow.com/a/14145510/1060487

Or this one: https://stackoverflow.com/a/15115171/1060487

Both approaches should work fine.

I've experimented with 1 other solution:

http://css-tricks.com/saving-the-day-with-scoped-css/

Which DOES NOT work in Chrome but there is a polyfill here, which doesn't really seem to work that well...

Check the support here: http://caniuse.com/style-scoped

Summary: the LESS route seems to be the best solution right now...

Community
  • 1
  • 1
mattdlockyer
  • 6,984
  • 4
  • 40
  • 44
1

I recently created Boundary, a CSS+JS library to solve problems just like this. Boundary creates elements that are completely separate from the existing webpage's CSS.

Take creating a dialog for example. After installing Boundary, you can do this in your content script

var dialog = Boundary.createBox("yourDialogID", "yourDialogClassName");

Boundary.loadBoxCSS("#yourDialogID", "style-for-elems-in-dialog.css");

Boundary.appendToBox(
    "#yourDialogID",
    "<button id='submit_button'>submit</button>"
);

Boundary.find("#submit_button").click(function() {
  // find() function returns a regular jQuery DOM element
  // so you can do whatever you want with it.
  // some js after button is clicked.
});

Elements within #yourDialogID will not be affected by the existing webpage.

Hope this helps. Please let me know if you have any question.

https://github.com/liviavinci/Boundary

Livia Zhang
  • 193
  • 1
  • 7
  • I tried to use Boundary as I want to open a twitter bootstrap modal from within a chrome extension contentscript. The modal is shown but not as a modal as I and probably you are used to it (over the current web page) but just as part of the webpage where the iframe was added. Any idea what I'm doing wrong? – Torsten Feld Nov 25 '14 at 14:15
  • @TorstenFeld can you please be more specific? Maybe some code example and screenshots? Feel free to email me liviavinci@gmail.com – Livia Zhang Nov 27 '14 at 07:03