0

I have following problem: I'm taking the same element from context of web page and chrome extension I'm developing. When I'm calling

element.parentNode

From context of page ("top" in devTools) I'm reciving #document-fragment. When I do exactly saem thing from extension context (content script of extension), I'm getting reference to some web component "force-record-layout-item" (this element is host for fetched before document-fragment). On picture blue - element, yellow - parent from chrome extension context. enter image description here What is the reason of situation like this? How can I fetch same parent for both contexts? (I occured also similar situation where in context of chrome extension parentNode was inside of shadow root relatively to parentNode of the same element from page context and can not figure out why)

Lucas
  • 81
  • 7
  • 1
    DOM is identical in both contexts so the problem is something else, e.g. the parent is changed by the page after your content script has checked it. – wOxxOm Feb 17 '20 at 11:24
  • I know the DOM should be the same, but I can not understand behaviour. I removed all content scripts and only one that left contains this: document.addEventListener('contextmenu', e => console.log(e.target), true), I also added the same from dev tools from top. Extension printing spam and one added from page context printing one-record-home-flexipage2 that is web component. Why it gives me different results on different context? – Lucas Feb 17 '20 at 14:07
  • `e.target` will only report the top shadowRoot container. Use `e.composedPath()[0]` instead. – wOxxOm Feb 17 '20 at 15:45
  • ok, but why result from extension and dev tools are different when I'm adding exactly the same listener to document? – Lucas Feb 17 '20 at 16:41
  • in this case composedPath from chrome extension gives me 66 elements, from page context 86, why it is different? – Lucas Feb 17 '20 at 16:47
  • Interesting. It's either a bug or an unavoidable peculiarity caused by the fact that CustomElement registration is done in JavaScript per definition so it belongs to the page context, which extensions can't access directly, [they need a DOM script for that](https://stackoverflow.com/a/9517879). – wOxxOm Feb 17 '20 at 17:53
  • I found the problem with Lightning Web Components. With standard web components everything behaves as I expected. – Lucas Feb 17 '20 at 19:20

1 Answers1

1

Both should be using the same DOM, I think you are trying to access the elements at different times (before or after the fetch completes) is what makes the difference. Try to run the code in your content script with a few seconds of delay to test this. IF that does it then you could try using a Mutation Observer to execute your code when that element changes. You could also play around with the run_at attribute of your content script in the manifest.

Gergely Szabo
  • 870
  • 6
  • 15
  • The problem is that only think I'm doing is taking referenece and DOM is not mutated. Source element is the same, becouse before I changed manualy id through dev tools. Delay gives me exactly same result (and it is parentNode so if dom doesn't change delay won't change anything). It needt to be somehow related with web-components, but have no idea how. – Lucas Feb 17 '20 at 10:19