Skip to content

Cannot call document.cloneNode(true) in content script #577

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
1 of 2 tasks
rbhalla opened this issue Nov 12, 2022 · 8 comments
Open
1 of 2 tasks

Cannot call document.cloneNode(true) in content script #577

rbhalla opened this issue Nov 12, 2022 · 8 comments
Assignees
@jacksteamdev
Labels
bug Something isn't working dev-mode Related to vite dev mode webcomponents Related to Web Components

Comments

@rbhalla
Copy link
Contributor

rbhalla commented Nov 12, 2022 •
edited
Loading

Build tool

Vite

Where do you see the problem?

  • In the browser
  • In the terminal

Describe the bug

I am not able to called document.cloneNode(true) in a content script.

It seems like this is a result of the webcomponents polyfill. Not something I was bumping into when using rollup.

It seems like in the prod build (using vite build) this problem doesn't occur.

To clarify, I am not explicitly including this library or explicitly using web components.

Logs

webcomponents-custom-elements-z7FmG.js:42 Uncaught TypeError: Cannot read properties of null (reading '__CE_registry')
    at Ga.Node.cloneNode (webcomponents-custom-elements-z7FmG.js:42:436)

System Info

Binaries:
    Node: 15.10.0 - ~/.nvm/versions/node/v15.10.0/bin/node
    npm: 7.5.3 - ~/.nvm/versions/node/v15.10.0/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Safari: 16.0
  npmPackages:
    @crxjs/vite-plugin: ^1.0.14 => 1.0.14
    vite: ^2.9.5 => 2.9.15

Severity

blocking all usage of RPCE
@rbhalla rbhalla changed the title Cannot call document.cloneNode(true) Cannot call document.cloneNode(true) in content script Nov 12, 2022
@jacksteamdev jacksteamdev added the awaiting-feedback Further information is requested label Nov 13, 2022
@jacksteamdev
Copy link
Contributor

Vite uses WebComponents for the error overlay, but content scripts don't support WebComponents out of the box. CRXJS adds the polyfill in development but not in production.

If you can provide a link to a minimal reproduction repo, I'll be able to offer better advice.

@rbhalla
Copy link
Contributor Author

rbhalla commented Nov 13, 2022 •
edited
Loading

Hey @jacksteamdev, appreciate your help here again.

Here is a reproduction: https://github.com/rbhalla/crxjs-bug-repro/tree/document-clone-node-bug

I guess this is technically a problem with the polyfill, but considering it doesn't play nicely with content scripts, I wonder if there's a way to not enable that functionality?

My experience with vite integration is poor so it's possible my understanding is flawed here. Keen to hear your take!

@jacksteamdev jacksteamdev removed the awaiting-feedback Further information is requested label Nov 13, 2022
@jacksteamdev jacksteamdev self-assigned this Nov 13, 2022
@Doflatango
Copy link

I am facing the same issue.

@jacksteamdev jacksteamdev added webcomponents Related to Web Components bug Something isn't working dev-mode Related to vite dev mode labels Nov 20, 2022
@zeeyang
Copy link

zeeyang commented Jan 27, 2023

Ran into the same issue. @jacksteamdev is there a workaround?

@IamFive
Copy link

IamFive commented Jul 8, 2023

same issue, may you kindly describe how this issue happens, so that i will try to fix it.

@nechmads
Copy link

Facing the same issue.
I'm using Vite and https://crxjs.dev/vite-plugin to build a chrome extension. When trying to run document.cloneNode(true) from within a content script, the browser throws an error: "TypeError: Cannot read properties of null".
(even through the document node exist).

Anyone knows how to fix this?

@ianmacartney
Copy link

Here's a hacky workaround:

  const d = new DOMParser().parseFromString("<html><body></body>", "text/html");
  d.body = document.body.cloneNode(true) as HTMLBodyElement;

@mefengl
Copy link

mefengl commented Oct 28, 2023

Here's another workaround:

const d = new DOMParser().parseFromString(document.documentElement.outerHTML, 'text/html');

Compared to document.body.cloneNode, there may be some performance loss, but it will include nodes outside the body, such as the head.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jacksteamdev jacksteamdev

Labels
bug Something isn't working dev-mode Related to vite dev mode webcomponents Related to Web Components
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@ianmacartney @nechmads @IamFive @zeeyang @Doflatango @rbhalla @jacksteamdev @mefengl