CODEWITHSUNDEEP
cssgoogle-chrome
79-madms
79-madms

Reputation: 606

Chrome extension: Eliminate CSS inheritance for content script

I'm asking this despite an essentially identical Q&A here just to see if the two years since might have yielded any insights.

I've been working on a Chrome extension that injects its own GUI into every web site the user visits. A problem arises with the look of the GUI because of inheritance: although it works well on most pages, it gets wonky (sometimes to the point of breaking) on others.

I've read of a much-needed CSS approach to this issue, but it doesn't seem to be supported in Google Chrome 29.0. The answer in the above-listed Q&A would be incredibly tedious to implement, as my HTML is dynamic and extensive and meant to be extensible; I'm trying to simplify the code for modularity's sake, not make it insanely complex. My content script does a lot of communicating (background & popup scripts), so I'm not sure that an iframe is practical. (Moreover, I've had absolutely no success with iframes in this context.)

Might anybody have come up with an ingenious solution that I've completely overlooked? Is there maybe an API for this sort of thing?

Upvotes: 1

Views: 250

Answers (1)

Livia Zhang
Livia Zhang

Reputation: 303

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

Upvotes: 1

Related Questions