[BUG] Compatibility issue with Firefox's Xray wrapper

What happened?

I'm encountering an error when trying to make my Chrome extension support Firefox. The extension is built using Plasmo and works fine in Chromium-based browsers, but not in Firefox. The error seems to be related to Firefox's X-ray vision mechanism. Below are the details of the error and the context in which it occurs.

Untitled

Relevant Code snippet in which I am getting the error:


export function renderWriterModalContainerToDocBody() {
    try {
        const { reactContainer, shadowRoot } = createReactModalContainer(cgw_main_containerCls);
        initStyles(shadowRoot);
        globals.writerModalEl = reactContainer;
        // Insert the new element at body
        document.body.appendChild(reactContainer);

        const root = createRoot(shadowRoot);
        root.render(
            <StrictMode>
                <ModalContainer />
                <PopupAfterTextSelectionFeature />
            </StrictMode>,
        );
    } catch (e: any) {
        console.error('Error: ', e);
    }
}

It appears that the issue might be related to how Plasmo handles DOM interactions in Firefox. Any guidance on how to resolve this or adjustments needed to make the extension compatible with Firefox would be greatly appreciated.

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Firefox

Relevant log output

No response

(OPTIONAL) Contribution

[ ] I would like to fix this BUG via a PR

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems.

PlasmoHQ / plasmo