CSS loading order
Hi everyone,
Context: I've built an extension using the
content-scripts-ui [1] template as foundation - specifically the google-sidebar variant. I've kept the same 2 CSS files i.e. google-sidebar-base.css and google-sidebar.css for styling whereby the former is loaded into the parent page (import "./google-sidebar-base.css") and the latter is loaded into the shadow DOM (via getStyle). I've modified isOpen to be closed/false by default.
Problem: The first time the extension is rendered, the styles from google-sidebar-base.css don't get loaded and the extension panel renders on the left hand side and with a smaller width than normal. Once I refresh it, the problem goes and stays away for some time, until I close my browser or if I refresh after some time has passed. Any idea why this might be happening? Feels like a race condition until the stylesheets are cached maybe. Any help would be appreciated.
[1] https://github.com/PlasmoHQ/examples/tree/a26cdd58ac5c90e46e786ac2dd1b71fa0e9c7b97/with-content-scripts-uiGitHub
examples/with-content-scripts-ui at a26cdd58ac5c90e46e786ac2dd1b71f...
🔰 Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - PlasmoHQ/examples
0 Replies