I am writing a Chrome extension that adds a "console" div on top of any page that allows the user to see "meta" information about the page. In this case the extension shows information about Chinese characters that the user hovers over.
The basics of the plugin is that it injects a div into the page and then renders a react app to that div. The extension app is the yellow bar to the right:
I would like to use some sort of CSS framework inside my extension app, ideally Bootstrap via React-Bootstrap. However when I add the library to my react app via import 'bootstrap/dist/css/bootstrap.min.css' the css affects the entire web page and not just my app. For obvious reasons this is bad as every page the user visits will be affected by this CSS.
So my question is there a way for me to use a CSS framework (bootstrap) in such a way that it will only affect my react App? Some way to scope it or re-build it?
For example this is what NPM homepage looks like with that CSS in the extension. It is totally distorted:
And without it:
