0

What is the recommended way to write content Script so that its CSS does not affect the web page and vice versa?

Right now, I am writing CSS for elements inserted through contentScript.js in the contentScript.css file and including it in manifest.json but the CSS of the extension is interfering with the website and the website's CSS is interfering with the extension's.

I can avoid contentScript CSS from interfering with the website's CSS by simply writing cryptic CSS className in the content script but I can't get the website's CSS to not interfere with the Extension's elements.
Some ways I am aware of:

ShadowDOM : but to my knowledge, you have to write inline CSS, which sucks. Is there any other way?

Prabin
  • 59
  • 4
  • You cannot isolate the two, you will have to carefully create CSS rules that do not conflict with the ones already present in the website. It should be pretty simple though, just put an `id=` that does not exist in the website on the root element you are inserting and use that for all your CSS rules. – Marco Bonelli Aug 14 '22 at 14:28
  • @MarcoBonelli I thought of that and implemented it, but the element-specific CSS still affects the extension's elements. Eg. if the page has styles on input it will also affect if your contentScript has an input element. How do you disable that? – Prabin Aug 14 '22 at 14:46
  • Use Shadow DOM. You don't have to use inline CSS. – wOxxOm Aug 14 '22 at 15:00

0 Answers0