search

crxjs / chrome-extension-tools

Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
https://crxjs.dev/vite-plugin
2.71k stars 181 forks source link

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

Open rbhalla opened 1 year ago

rbhalla commented 1 year ago

Build tool

Vite

Where do you see the problem?

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

jacksteamdev commented 1 year ago

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 commented 1 year ago

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!

Doflatango commented 1 year ago

I am facing the same issue.

zeeyang commented 1 year ago

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

IamFive commented 1 year ago

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

nechmads commented 1 year ago

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 commented 11 months ago

Here's a hacky workaround:

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

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.