Is there a method to avoid style lack?

extension-js / extension.js

🧩 Plug-and-play, zero-config, cross-browser extension development tool.

https://extension.js.org

MIT License

3.67k stars 93 forks source link

Is there a method to avoid style lack? #118

Closed dinfer closed 2 months ago

dinfer commented 3 months ago

Tailwind resets all the styles in the pages which my content script inject into. I just use the official react-typescript template, and I only change the content_scripts.matches to ["<all_urls>"] in the manifest.json, no code is modified.

Is there a way to avoid the "style lack"? It seems WebComponent cannot be used here, cause customElements is null in the isolated runtime of content script.

cezaraugusto commented 3 months ago

hi @dinfer not sure what is the question. I guess you want to prevent Tailwind from injecting default styles into the page?

dinfer commented 3 months ago

@cezaraugusto I want to use tailwind for the elements created by content script, but I dont want to affect the original styles of that page.

For example, I want to use tailwind to style the panel at right-bottom, but the links of google should remain be blue.

I need a way to make tailwind only affect the elements created by content script

cezaraugusto commented 2 months ago

sure, please take a look at my reply in https://github.com/extension-js/extension.js/issues/48#issuecomment-2089148686, I guess adding the content element to the shadow dom will do the trick

dinfer commented 2 months ago

@cezaraugusto Thanks, I'm closing this issue