Re-use of css from options/pop-up page also in an injection script with ShadowRootUI? #1548

Tensai75 · 2025-03-31T08:36:06Z

Tensai75
Mar 31, 2025

Hi,

in my extension, I use the same css file @/assets/style.css in all my page entrypoints (same link tag in the index.html for option page, pop-up page, etc.):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="@/assets/style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="manifest.open_in_tab" content="true" />
    <title data-locale="extension_name"></title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="main.ts"></script>
  </body>
</html>

When building the extension, the style.css lands in the assets folder and the css file is used by all pages. So far, so good.

However, I use the same css file also in an injection script with shadowRootUI like this:

import { createApp } from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config'
import { MyPreset } from '@/composables/presets'
import '@/assets/style.css'

export default defineContentScript({
  registration: 'runtime',
  matches: ['<all_urls>'],
  cssInjectionMode: 'ui',
  main(ctx) {
    const primeVueTheme = {
      theme: {
        preset: MyPreset,
        options: {
          prefix: 'myPrefix',
        },
      },
    }
    // Define the UI
    createShadowRootUi(ctx, {
      name: 'injected-dialog',
      position: 'inline',
      anchor: 'body',
      append: 'last',
      onMount: (container) => {
        // Define how the UI will be mounted inside the container
        const app = createApp(App).use(PrimeVue, primeVueTheme)
        app.mount(container)
        return app
      },
      onRemove: (app) => {
        // Unmount the app when the UI is removed
        app?.unmount()
      },
    }).then((ui) => {
      // Mount the UI
      ui.mount()
    })
  },
})

This then results in an injection.js and an injection.css file in the content-scripts folder.
So the style.css is actually contained twice in my extension.
Isn't there a possibility to reuse the generated css file in the assets folder also for the injection script?

Thanks for your help!

aklinker1 · 2025-03-31T14:43:22Z

aklinker1
Mar 31, 2025
Maintainer

Yes, though it requires some workarounds. Put it in your public folder, or, if it needs to be processed by Vite, make it an unlisted CSS entrypoint.

Then in your HTML pages, use a reference like href="/<path-to-style>.css" instead of use an alias or relative path.

In your content script, you'll have to add the CSS to the page manually by creating a link or style element yourself.

async onMount(uiContainer, shadow) {
  const url = browser.runtime.getURL('/<path-to-style>.css');
  const myStyles = document.createElement('style');
  const myStyle.textContent = await (await fetch(url)).text();
  shadow.querySelector('head').append(myStyles);

  // The rest of your code
}

There are several reasons why fetching the CSS text content is better than using a link with a URL, but you could try that if you want.

Mainly that the CSS needs to be loaded before the UI is mounted. Otherwise you see flashing styles and layout shifts.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Re-use of css from options/pop-up page also in an injection script with ShadowRootUI? #1548

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Re-use of css from options/pop-up page also in an injection script with ShadowRootUI? #1548

Tensai75 Mar 31, 2025

Replies: 1 comment

aklinker1 Mar 31, 2025 Maintainer

Tensai75
Mar 31, 2025

aklinker1
Mar 31, 2025
Maintainer