Unable to set anchor within an iframe inside of the dom.

[SamHoque]

Describe the bug

If the element inside of the dom is located inside of an iframe, the anchor for content script does not work.

Reproduction

await createShadowRootUi(ctx, { anchor: 'iframe', ... });

Steps to reproduce

No response

System Info

npx envinfo --system --browsers --binaries --npmPackages wxt,vite

  System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i9-12900K
    Memory: 4.56 GB / 31.79 GB
  Binaries:
    Node: 18.20.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.2 - C:\Program Files\nodejs\pnpm.CMD
    bun: 1.2.2 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (124.0.2478.80)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    wxt: ^0.19.22 => 0.19.22

Used Package Manager

pnpm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[aklinker1]

You need to inject your content script into all frames, so it runs inside the iframe as well as the parent window.

export default defineContentScript({
  allFrames: true,
  // ...
});

I forget if the script's matches needs to match the iframe's URL as well... I think it just needs to match the parent page's URL.

[aklinker1]

Alternatively, if the iframe is from the same origin, you can use a function that returns an element instead of a query string for the anchor. Inside it, you can get the iframe's document and query elements inside the iframe.

createShadowRootUi({
  anchor: () => {
    // ...
  },
});

https://wxt.dev/api/reference/wxt/client/interfaces/ContentScriptAnchoredOptions.html#anchor