Skip to content

fix: use uiContainer to apply position when creating shadow root ui #1939

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: use uiContainer to apply position when creating shadow root ui #1939

wants to merge 1 commit into from

Conversation

@namukang
Copy link
Contributor

@namukang namukang commented Oct 15, 2025 •
edited
Loading

Overview

This is a companion PR for aklinker1/webext-core#118

Once the shadow DOM uses a <div> instead of constructing a full HTML document, the current approach of finding the <html> element won't work. Instead, the uiContainer will be used to position the content script UI.

Manual Testing

How to test this change:

  1. Create a new WXT extension using pnpm dlx wxt@latest init
  2. Use modified wxt
    • Clone wxt repo
    • Check out this PR
    • Run pnpm build in wxt/packages/wxt
    • In the extension directory, run pnpm link <path-to-wxt/packages/wxt> to use modified version of wxt
  3. Use modified webext-core
  4. Use createShadowRootUi with position overlay or modal to verify that the element is position as desired

Example code for testing:

export default defineContentScript({
  matches: ["<all_urls>"],
  cssInjectionMode: "ui",

  async main(ctx) {
    const ui = await createShadowRootUi(ctx, {
      name: "example-ui",
      position: "overlay", // <-- change between "inline", "overlay", "modal"
      anchor: "body",
      onMount(container) {
        const app = document.createElement("div");
        app.textContent = "Hello world!";
        app.style.padding = "8px";
        app.style.border = "2px solid red";
        container.append(app);
      },
    });

    ui.mount();
  },
});

@netlify
Copy link

netlify bot commented Oct 15, 2025 •
edited
Loading

✅ Deploy Preview for creative-fairy-df92c4 ready!

Name Link
🔨 Latest commit 456f1f5
🔍 Latest deploy log https://app.netlify.com/projects/creative-fairy-df92c4/deploys/68f01f8a4f343600082e4504
😎 Deploy Preview https://deploy-preview-1939--creative-fairy-df92c4.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@namukang namukang mentioned this pull request Oct 15, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@aklinker1 aklinker1 Awaiting requested review from aklinker1 aklinker1 is a code owner

@Timeraa Timeraa Awaiting requested review from Timeraa Timeraa is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@namukang