I have an addon which adds a popup element to a page. This element is given an id, and is styled using a style sheet loaded as a Content Script.
The problem is that the CSS may interfere with that already on the page.
Is there any way to limit the scope of the CSS to my newly created element?
Thanks
It’s not currently possible as far as I know, other than to use an id that seems unique.
I was coming to that conclusion. HTML scoped styles would have been helpful here, but that’s being deprecated (yet another missed opportunity in my opinion).
I am toying with the possibility of trying to create a style sheet dynamically.
Thanks
This is not clear to me. Why should you inject css stylesheet? If you have html page used by options_ui, then you are able to use the script which the html page uses. And this script is definitevly not Content Script. Do you understand what Content Scripts are used for? You may use addon’s script page to create dynamical stylesheets, just save them to storage.local … AFAIK, messaging betweeen background script and page script is necessary to accomplish it.
You could propably put your element in an <iframe> element and add the styles only to that frame