wxt icon indicating copy to clipboard operation
wxt copied to clipboard
verified publisher icon wxt-dev

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

Open namukang opened this issue 2 months ago • 1 comments

Overview

This is a companion PR for https://github.com/aklinker1/webext-core/pull/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
    • Clone webext-core repo
    • Check out https://github.com/aklinker1/webext-core/pull/118
    • Run bun run build in webext-core/packages/isolated-element
    • In the wxt directory, run pnpm link <path-to-webext-core/packages/isolated-element> to use modified version of @webext-core/isolated-element
  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();
  },
});

namukang avatar Oct 15 '25 22:10 namukang

Deploy Preview for creative-fairy-df92c4 ready!

Name Link
Latest commit 456f1f55bdf8f016ca52259771f697234d0b7813
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.

netlify[bot] avatar Oct 15 '25 22:10 netlify[bot]