[BUG]: List does not populate, but there are custom elements in the page

[baermathias]

Describe the bug There are several pages, where web component devtools does not populate the list, one example is https://www.mercedes-benz.de/passengercars/configurator.html

To Reproduce Steps to reproduce the behavior:

1. Go to https://www.mercedes-benz.de/passengercars/configurator.html
2. Open Web component dev tools
3. See error

Expected behavior Populate web components list

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome & Firefox

[Matsuuu]

Heya @baermathias

What version of WCDT are you running?

I tried to view the page with the latest (0.2.1, shipped on Chrome), and was able to list the elements and analyze them

Please try updating to the latest version, it fixed some errors on larger pages that version 0.2.0 had.

Get back to me after tryin it out.

PS. The fix is only shipped on chrome currently

[baermathias]

Hey @Matsuuu, thank you for the quick response. I used 0.2.0 and now have updated to 0.2.1 and first it seemed as it would work better, but after a few reloads the problem is still there. There are two error outputs.

1.) Uncaught (in promise) Error: Duplicate script ID 'web-component-devtools': Context: background-worker.js Stack Trace: background-worker.js:28 (anonymous function)

import './background.js';
import './message-types.js';
import './connection-channels.js';
import './nydus.js';
import './analyzer.js';

async function getCurrentTab() {
    const queryOpts = { active: true, lastFocusedWindow: true };
    const [tab] = await chrome.tabs.query(queryOpts);
    return tab;
}

async function injectContentScript() {
    const tab = await getCurrentTab();
    if (tab.url.startsWith("chrome://")) return;

    await chrome.scripting.unregisterContentScripts();

    await chrome.scripting.registerContentScripts([
        {
            id: "web-component-devtools",
            matches: ["http://*/*", "https://*/*"],
            js: ["crawler-inject.js"],
            runAt: "document_idle",
            world: "MAIN",
        }
    ]);
}  // <-- this is line 28

chrome.tabs.onUpdated.addListener(injectContentScript);
chrome.tabs.onActivated.addListener(injectContentScript);

2.) [WebComponentDevTools]: Message send missed. Tab connection pool for tab 568778169 not found. {"recipient":"WC DevTools - Initializer","message":{"type":11,"tabId":568778169},"tabId":568778169} Context: devtools://devtools/bundled/devtools_app.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/@772095164c7d5d4e73160f858efed3b5e87eca83/&can_dock=true Stack Trace: nydus.js:271 (message)

//...
    async message(recipient, message, _retryCount = 0) {
        await this.whenReady;

        const tabId = message.tabId ?? (await this._tryGetCurrentTab());
        let connPool = this.connections[tabId] ?? this.connections[-1];
        if (!connPool) {
            if (_retryCount >= 5) {
                console.warn(    // <-- this is line 271
                    `[WebComponentDevTools]: Message send missed. Tab connection pool for tab ${tabId} not found.`,
                    JSON.stringify({
                        recipient,
                        message: message.length > 200 ? message.substring(0, 200) + "..." : message,
                        tabId,
                    }),
                );
            } else {
                await this._delay(200);
                this.message(recipient, message, _retryCount + 1);
            }
            return;
        }

        const conn = connPool[recipient]?.connection;
        if (!conn) {
            if (_retryCount >= 5) {
                console.warn(
                    `[WebComponentDevTools]: Message send missed. Connection ${recipient} not found.`,
                    JSON.stringify({
                        recipient,
                        message: message.length > 200 ? message.substring(0, 200) + "..." : message,
                        tabId,
                    }),
                );
            } else {
                await this._delay(200);
                this.message(recipient, message, _retryCount + 1);
            }
            return;
        }
        conn.postMessage({ ...message, tabId });
    }
// ...

[Matsuuu]

Thank you so much for the thorough input @baermathias !

I'll try to find some time later on this week to take a look at and fix this issue. It seems that the extension is trying to inject the analysis code multiple times and fixing that shouldn't be hard.

I'll get back to you as soon as I have a fix ready.

Until then, sorry for the inconvenience

[Matsuuu]

I've revisited some parts of the code and the stability should be better with release 0.2.2 on Chrome. Could you try it out?

[baermathias]

Thank you, I just tried it and there are still the same errors as mentioned above. The duplicate script id error and message send missed. Tab connection pool for tab xxx not found.

Additionally there is a new one:

Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
background-worker.js:0 (anonymous function)

[Matsuuu]

I'm so sorry for the inconvenience.

This is something I'm having a hard time trying to reproduce. If you could give me a step by step re-production of this issue, I might be able to find a step I'm missing.

In the code we are running await chrome.scripting.unregisterContentScripts(); which should unregister the dynamic scripts.

However it seems that it's not doing that correctly. I am wondering what could cause it.

So yeah. If you could @baermathias provide me with a clear step by step repro, I'll look deeper into this.

And again, sorry for the inconvenience