1836269 - Uncaught errors occur when a browser extension utilizes Web Components that incorporate a shadow root element.

Status: NEW

(WebExtensions :: General, defect)

Description

[martin.lux]

Attachment: webcomponent-bug.zip

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Steps to reproduce:

We are currently developing a browser extension that enhances the user's ability to translate text by injecting UI elements into the active website. This extension has already been published for Google Chrome, utilizing Manifest version 3.

To encapsulate the UI elements, we have employed a WebComponent with a single shadow root. However, we have encountered a significant number of errors in the browser's JavaScript console, specifically of the following type: "Uncaught Error: Permission denied to access property ELEMENT_NAME".

It is important to note that these errors are not thrown within the JavaScript context of the content script of the browser extension itself. Rather, they occur within the JavaScript context of the current website, particularly on websites with extensive JavaScript functionality such as Twitter or Facebook. Our analysis suggests that the DOM events triggered inside the WebComponent's shadow root are bubbling up and causing conflicts with the website's JavaScript, leading to these errors.

To demonstrate this issue, we have attached two sample browser extensions: one based on Manifest version 2 and another based on Manifest version 3. Both extensions inject a simple WebComponent into the upper left corner of the current website. When you interact with this element by hovering over it or clicking on it, the error will be thrown (javascript console).

We recommend reproducing this issue by installing either of the sample extensions and trying them out on Twitter or Facebook.

Actual results:

When users interact with the UI elements injected by our browser extension, a substantial number of errors are thrown in the browser's JavaScript console. These errors typically look like this: "Uncaught Error: Permission denied to access property ELEMENT_NAME".

Expected results:

No error should be raised when interacting with the injected UI element.

Comment 1

[Rob Wu [:robwu]]

Could you try to create a smaller example that demonstrates the issue? The extension is quite large.

Note: custom element support in content scripts is extremely limited across browsers. This isn't documented yet, but I added some details at https://github.com/mdn/content/issues/25821#issuecomment-1508490416

Comment 2

[lucas.mathis]

Attachment: webcomponent-bug-firefox-reproduction.zip

Updated bug reproduction repo. See comment for further explanation

Comment 3

[lucas.mathis]

Hi Rob,

Thanks for the response. I work with Martin and am working on this same bug with him. I just uploaded webcomponent-bug-firefox-reproduction.zip, which is a fully minimal version of the bug reproduction repo.

This is a very minimal version of how we've built our extension for Chrome, and on that browser we don't see these errors at all. We first encountered them in trying to port our extension to Firefox, using Manifest v3.

Note: this test repo is on Manifest V2, but the error is exactly the same on Manifest V3. We are developing both our Chrome extension and this Firefox extension for Manifest V3, but tried to reproduce on V2 to see if it was something specific to V3. As far as we can tell, the error is exactly the same in both V2 and V3. It never occurs in Chrome, either in our production extension over there, or in this minimal reproduction

Steps To Reproduce:

In the extension folder file content.js, we create a WebComponent that adds a small pink square to every webpage. The square changes color when clicked.

To reproduce the error we're seeing, load the extension into Firefox. We're using web-ext run to do so. We've been using Twitter.com to test this, but most websites reproduce the error (Wikipedia and NyTimes also work, as two examples). Open the Javascript console, and then move your mouse into and out of the pink square. In Twitter, the console errors are something like Uncaught Error: Permission denied to access property "__reactFiber$3aaoo6f69wv" but they vary depending on which site you're on.

We've tested this with and without the WebComponents polyfills found here: https://github.com/webcomponents/polyfills. The polyfill is necessary for this code to work on Chrome, but with the polyfill installed, this exact same minimal reproduction works on Chrome and no errors are throws on e.g. Twitter.

Thanks again for looking into this. I'm going to review the links you sent and see if any of that information helps us solve or work around this. If you have any further questions or need any further information from our end, please just let us know.

Comment 4

[lucas.mathis]

One further note: The code seems to fully work. In the reproduction above, and in the full version of the Firefox extension we're developing, the WebComponents are added to the page and they function as intended.

The errors we're reporting here seem to have something to do with the WebComponents interacting with the web page they're injected into via the extension, and not with the individual functionality of the WebComponents themselves.

Thanks again!

Comment 5

[Alex Cornestean]

Hello,

I reproduced the issue on the latest Nightly (116.0a1/20230605210706), Beta (115.0b1/20230605210831) and Release (113.0.2/20230522134052) under Windows 10 x64 and macOS 11.3.1 using the extension from Comment 2.

On Twitter.com, hovering on and off the pink square will log the mentioned error in the web console. See the attached screenshot for more details.

Comment 6

[Alex Cornestean]

Attachment: 2023-06-06_10h45_25.png

Comment 7

[lucas.mathis]

From additional searching, it seems like our issue is the same or related to this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1492002

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:rpl, could you have a look please?

For more information, please visit BugBot documentation.