Registering a ProxyService before browser.runtime.onMessage.addListener throws an error on the Content Script.

[charlie632]

Just had a really weird bug.

If I have this:

export default defineBackground(() => {
    const globalStateService = registerGlobalStateService();

    const recorderService = registerRecorderService(
        globalStateService,
    );

    browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
        if (message.type === "get-tab-id" && sender.tab?.id) {
            console.log("get-tab-id", sender.tab.id);

            return Promise.resolve({ tabId: sender.tab.id });
        }
        return;
    });
});

And from the content script I do this

export default defineContentScript({
    matches: ["<all_urls>"],
    allFrames: true,
    runAt: "document_start",
    async main() {
        await browser.runtime.sendMessage({type: 'get-tab-id});
    }
});

I get the following error on my content script:

Error: [messaging] Unknown message format, must include the 'type' & 'timestamp' fields, received: {"type":"get-tab-id","sender":{"id":"jeiahcjhhajlffdcbfcpigkeiahnnfbg","url":"https://es.wikipedia.org/wiki/Albatros_D.III","origin":"https://es.wikipedia.org","frameId":0,"documentId":"07EC29AE46A842CD148F5037FDF6669B","documentLifecycle":"active","tab":{"active":true,"audible":false,"autoDiscardable":true,"discarded":false,"favIconUrl":"https://es.wikipedia.org/static/favicon/wikipedia.ico","groupId":-1,"height":924,"highlighted":true,"id":527771240,"incognito":false,"index":0,"lastAccessed":1721279029617.227,"mutedInfo":{"muted":false},"pinned":false,"selected":true,"status":"loading","title":"Albatros D.III - Wikipedia, la enciclopedia libre","url":"https://es.wikipedia.org/wiki/Albatros_D.III","width":529,"windowId":527771239}}}
    at wrappedSendMessageCallback (browser-polyfill.js:1188:18)

However, if I move the background script like this:

export default defineBackground(() => {

+    browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
+        if (message.type === "get-tab-id" && sender.tab?.id) {
+            console.log("get-tab-id", sender.tab.id);
+
+           return Promise.resolve({ tabId: sender.tab.id });
+        }
+        return;
+    });

    const globalStateService = registerGlobalStateService();

    const recorderService = registerRecorderService(
        globalStateService,
    );

-    browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
-        if (message.type === "get-tab-id" && sender.tab?.id) {
-            console.log("get-tab-id", sender.tab.id);
-
-           return Promise.resolve({ tabId: sender.tab.id });
-        }
-        return;
-    });
});

Moving the runtime listener before the services, it will work as expected.

Not sure if it has something to do with the listener registration, but I was having a really hard time.

Dependencies

• wxt 0.18.11
• @webext-core/proxy-service 1.2.0

[aklinker1]

Yeah, this is definitely a big, it should work either way... I'll look into this when I can