The first time I did plug-in development, First time using WXT, How to style the extension?

[StrawberryCake-Fish]

Hello, I am a beginner plugin developer, I have a scene right now, I mount the Svelte component to Document using an injected script. How do I style it?

This is my directory structure

src
  |-- assets
  |-- entrypoints
  |    |--background.ts
  |    |--content.ts
  |    |--injected.ts
  |-- utils
  |    |--inject.ts
  |-- view
  |    |--App.svelte

This is my code

// content.ts

import {injectScript} from "@/utils/inject";
import {ActionEnum} from "@/common/enums/action";
import {ShowHandle} from "@/content/show-handle";
import {RuntimeMessage} from "@/common/types";

export default defineContentScript({
    matches: ["*:https://*/*"],
    async main() {
        await injectScript("/injected.js", {
            keepInDom: true,
        });
    },
});

// injected.ts

import {Constant} from "@/common/consts";
import App from "@/view/App.svelte";

export default defineUnlistedScript(() => {
    console.log("Hello from injected.ts");
    const style = document.createElement('style')
    style.id = Constant.ContainerStyle
    style.innerText = `html {
        max-width: calc(100% - 450px) !important;
        position: relative !important;
        min-height:100vh !important;
    }`;
    document.head.appendChild(style)
    const container = document.createElement("div");
    container.id = Constant.ContainerRoot;
    container.style.position = "fixed";
    container.style.background = "#ffffff";
    container.style.zIndex = "99999";
    container.style.top = "0";
    container.style.right = "0";
    container.style.width = "450px";
    container.style.height = "100%";
    document.body.append(container);
    new App({target: container})
});

// App.svelte

<script lang="ts">
</script>

<main style="width: 100%; height: 100%;; box-sizing: border-box; padding: 5px;">
    <div class="main-container">Test</div>
</main>

<style>
    :root {
        width: 100%;
        height: 100%;
    }

    .main-container {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 5px;
    }
</style>

I found that the styles I wrote in Svelte didn't work, only inline styles did. What should I do to use CSS styles in my plugin development, I would appreciate it if someone could answer my questions.

[aklinker1]

WXT doesn't support UIs in injected scripts - put it in your content script and it will work automatically.

[StrawberryCake-Fish]

Thank you very much for your reply, WXT is awesome and helped me develop a browser plugin quickly. But I still have a question, how do I update my plugin automatically?

[aklinker1]

https://wxt.dev/get-started/publishing.html

[StrawberryCake-Fish]

Hi, I still have a question, how to use sidebarAction. I can't find relevant examples and permission Settings. Can you tell me how to do it? I accompanied the relevant configuration but did not look effective.

export default defineConfig({
    srcDir: 'src',
    modules: ['@wxt-dev/module-svelte'],
    manifest: {
        web_accessible_resources: [{
            resources: ["injected.js", "sidepanel.html"],
            matches: ["*:https://*/*"],
        }],
        action: {
            browser_style: true
        },
        sidebar_action: {
            "default_panel": "sidepanel.html"
        },
        permissions: [
            "sidePanel"
        ]
    },
    runner: {},
});

export default defineBackground(() => {
    console.log('Hello background!', {id: browser.runtime.id});
    browser.action.onClicked.addListener(async () => {
        await browser.sidebarAction.setPanel({
            panel: "sidepanel.html"
        })
    })
});

[aklinker1]

1. Create a sidepanel entrypoint: https://wxt.dev/guide/directory-structure/entrypoints/sidepanel.html
2. Add action: {} to your manifest
3. Call browser.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }) in the background

WXT automatically adds the sidePanel permission when you create the sidepanel entrypoint. The only thing you have to add to the manifest is the empty action object.

export default defineConfig({
    manifest: {
        action: {},
    },
});

Note that you can't use a popup if you want to open the sidepanel when clicking the action icon. If you also want a popup, you have to use a different method to open the side-panel: https://developer.chrome.com/docs/extensions/reference/api/sidePanel#open