How to really isolate stylesheets in the Google Chrome extension?

Question

I wrote a Google Chrome extension, which popups a dialog with an autocomplete field and it\'s own style, but there are some sites where my CSS gets totally broken, which doe

Answer 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",
    "submit"
);

Boundary.find("#submit_button").click(function() {
  // some js after button is clicked.
});

Elements within #yourDialogID will not be affected by the existing webpage. And find() function returns a regular jQuery DOM element so you can do whatever you want with it.

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

https://github.com/liviavinci/Boundary