如何在chrome扩展内容脚本中定位CSS

Question

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!

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

Answer 2

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