chrome-extension-tools icon indicating copy to clipboard operation
chrome-extension-tools copied to clipboard

Published 20 hours ago • verified publisher icon crxjs

Cannot call document.cloneNode(true) in content script

Open rbhalla opened this issue 2 years ago • 8 comments

Build tool

Vite

Where do you see the problem?

  • [X] 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 avatar Nov 12 '22 01:11 rbhalla

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.

jacksteamdev avatar Nov 13 '22 21:11 jacksteamdev

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!

rbhalla avatar Nov 13 '22 21:11 rbhalla

I am facing the same issue.

Doflatango avatar Nov 17 '22 14:11 Doflatango

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

zeeyang avatar Jan 27 '23 20:01 zeeyang

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

IamFive avatar Jul 08 '23 14:07 IamFive

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?

nechmads avatar Aug 19 '23 13:08 nechmads

Here's a hacky workaround:

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

ianmacartney avatar Sep 28 '23 10:09 ianmacartney

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.

mefengl avatar Oct 28 '23 12:10 mefengl