Separate content script css from site css?

Question

I'm building a browser extension and I want to use bootstrap in it. Problem is the bootstrap css is colliding with the page's css messing up some websites.

Is there a way to separate the content script css from the web page's css? Is there some known solution to this?

Possible duplicate of [How to really isolate stylesheets in the Google Chrome extension?](https://stackoverflow.com/questions/12783217/how-to-really-isolate-stylesheets-in-the-google-chrome-extension) — wOxxOm, Mar 26 '19 at 15:18

score 2 · Accepted Answer · answered Mar 26 '19 at 14:58

2

You can provide a namespaced version of bootstrap, where global styles are not applied outside a namespace CSS selector.

For generating this you must build bootstrap yourself using SASS.

This answer is a good resume of the procedure: How to namespace Twitter Bootstrap so styles don't conflict

answered Mar 26 '19 at 14:58

keul

7,673
20
45

It doesn't prevent the upper layers from affecting my html code though – K41F4r Mar 27 '19 at 11:03
That'a a different topic. In this case you must an iframe or shadown-dom – keul Mar 27 '19 at 11:04

Separate content script css from site css?

1 Answers1

Linked