-
|
Hi, in my extension, I use the same css file <!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 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 Thanks for your help! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 8 replies
-
|
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 In your content script, you'll have to add the CSS to the page manually by creating a 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. |
Beta Was this translation helpful? Give feedback.
-
|
Probably WXTs fault, not vite. It is the one transforming the href, not vite. See https://github.com/wxt-dev/wxt/blob/main/packages%2Fwxt%2Fsrc%2Fcore%2Fbuilders%2Fvite%2Fplugins%2FdevHtmlPrerender.ts#L53-L56 WXT has to update all scripts and links in HTML files to point them to the dev server during development because normally those files don't exist... However, in your case, it might. Reusing CSS like this isn't a flow WXT has optimized for. Since the files are local, it's not a big deal if two entrypoints generate the exact same CSS. Plus, nowadays, most people use tailwind, so each entrypoint needs to generate is own unique CSS anyways. Let's explore the original question again... Do you really need to reuse this CSS file? I tried pointing out some potential solutions, but if they don't work... This shouldn't be a blocker, right? Just inconvenient? |
Beta Was this translation helpful? Give feedback.
-
|
I think the simplest solution would be for wxt to look for the attribute wxt/packages/wxt/src/core/builders/vite/plugins/devHtmlPrerender.ts Lines 152 to 153 in da9e27c Proposal: document.querySelectorAll(querySelector).forEach((element) => {
if (element.hasAttribute('vite-ignore') || element.hasAttribute('wxt-ignore')) {
element.removeAttribute('wxt-ignore');
return;
}
const src = element.getAttribute(attr);
...EDIT: I have tested it and it works perfectly! PR: #1603 And I think it makes perfect sense to reuse the CSS to keep the size of the extension as small as possible. Regards, Tensai |
Beta Was this translation helpful? Give feedback.
-
|
@Tensai75 Thanks for the research. Can you provide a full example of your working solution? |
Beta Was this translation helpful? Give feedback.
-
|
@amitbeck I don't know if this is the best solution, but my current workaround is to load the CSS and mount it in a style tag in the onBeforeMount callback function: <script lang="ts" setup>
import { browser } from '#imports'
import { onBeforeMount, ref } from 'vue'
import { PublicPath } from 'wxt/browser'
const loaded = ref(false)
onBeforeMount(async () => {
const url = browser.runtime.getURL('/assets/style.css' as PublicPath)
const response = await fetch(url)
const css = await response.text()
const style = document.createElement('style')
style.textContent = css
document.head.insertBefore(style, document.head.firstChild)
loaded.value = true
})
</script>
<template>
<div v-if="loaded" >
<!-- your HTML here -->
</div>
</template>As the callback is asynchronous, you must render the component conditionally with a v-if statement to prevent FOUC. You can see a fully functional example here: https://github.com/Tensai75/NZBDonkey-v1.0.0-preview/blob/beta/src/entrypoints/nzbdonkey/App.vue However, I would very much like to see wxt implement my suggestion with the |
Beta Was this translation helpful? Give feedback.
-
|
@Tensai75 Thanks! Isn't it missing the |
Beta Was this translation helpful? Give feedback.
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
linkorstyleelement yourself.There are several rea…