1871628 - Can't access a custom element's class properties in content scripts

Status: NEW

(WebExtensions :: General, defect, P3)

Description

[Simeon Vincent [:dotproto]]

Attachment: bug-custom-element-props.zip

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:123.0) Gecko/20100101 Firefox/123.0

Steps to reproduce:

1. Load the attached extension in Firefox.
2. Visit http://example.com.
3. Open the DevTools console and review the logged messages.

Actual results:

One of the logged messages will read "[isolated] myElement.fn3?.() undefined". This indicates that the fn3 property of the myElement instance was not accessible in the content script.

Also note that the same script behaves as expected when executed in the main world, as indicated by the log message "[main] myElement.fn3?.() fn3 instance".

Expected results:

The fn3 method of myElement should have been defined and the following line should have been written to the console: "[isolated] myElement.fn3?.() instance".

Comment 1

[Alex Cornestean]

Hello,

I reproduced the issue on the latest Nightly (123.0a1/20240102212702), Beta (122.0b4/20231229091551) and Release (121.0/20231211174248) under Windows 10 x64 and macOS 11.3.1.

Checking the DevTools console will reveal that a “[isolated] myElement.fn3?.() undefined” message is logged when accessing http://example.com/ with the attached extension loaded, as described in Comment 0.

For more details, see the attached screenshot.

Comment 2

[Alex Cornestean]

Attachment: 2024-01-03_09h26_57.png

Comment 3

[Rob Wu [:robwu]]

This is a duplicate of bug 1842565, which in turn has been marked as a duplicate of its root cause at bug 1820521.

But I'll keep this bug open because this bug may be easier to locate by extension developers, because it is in the WebExtensions component AND has a more relatable title, whereas the bug with the root cause is in a different component AND requires some understanding of what goes on under the hood to understand the issue.

P.S. To see what's going on, edit content_script.js and append the following:

console.log(`[${world}] myElement.fn6?.()`, myElement.__proto__.constructor + "");

From the main world: class MyElement extends HTMLElement { .... etc.
From the content script: function HTMLElement() { [native code] }