[BUG] Message Flow requires Extension ID when using MAIN world

[Anlanther]

What happened?

Message flow requires extension ID after sending a message from the content script to the background script. The content script has injected a function into the 'MAIN' world that triggers a sendMessageToBackground(). After button to call on function is pressed, the following error appears in devtools console:

Uncaught (in promise) TypeError: Error in invocation of runtime. sendMessage(optional string extensionId, any message, optional object options, optional function callback): chrome.runtime. sendMessage) called from a webpage must specify an
Extension ID (string) for its first argument.

I get this error on both Edge and Brave. Using both mac and windows OS.

Version

Latest

What OS are you seeing the problem on?

Other

What browsers are you seeing the problem on?

No response

Relevant log output

// Error
Promise {<rejected>: TypeError: Error in invocation of runtime.sendMessage(optional string extensionId, any message, opt…}

TypeError: Error in invocation of runtime.sendMessage(optional string extensionId, any message, optional object options, optional function callback): chrome.runtime.sendMessage() called from a webpage must specify an Extension ID (string) for its first argument. at x (chrome-extension://aofahlffpoepdbbebokimmfmggadbldm/window-main.ef1983a5.js:450:24) at Agent.findWebtoon (chrome-extension://aofahlffpoepdbbebokimmfmggadbldm/window-main.ef1983a5.js:382:60) 

"Error in invocation of runtime.sendMessage(optional string extensionId, any message, optional object options, optional function callback): chrome.runtime.sendMessage() called from a webpage must specify an Extension ID (string) for its first argument."
"TypeError: Error in invocation of runtime.sendMessage(optional string extensionId, any message, optional object options, optional function callback): chrome.runtime.sendMessage() called from a webpage must specify an Extension ID (string) for its first argument.\n    at x (chrome-extension://aofahlffpoepdbbebokimmfmggadbldm/window-main.ef1983a5.js:450:24)\n    at Agent.findWebtoon (chrome-extension://aofahlffpoepdbbebokimmfmggadbldm/window-main.ef1983a5.js:382:60)

// /contents/window-main.ts
import type { PlasmoCSConfig } from "plasmo"

import { Agent } from "~fdc3/agent"

export const config: PlasmoCSConfig = {
  world: "MAIN"
}

window.anlanther = {
  webtoon: new Agent()
}

// /agent.ts
import { sendToBackground } from "@plasmohq/messaging"

export class Agent {
  async findWebtoon(name: string): Promise<any> {
    const query = `` // tested graphql query
    const variables = {
      name
    }
    const test = await sendToBackground({
      name: "fetch",
      body: {
        query,
        variables
      }
    })

    return test
  }
}

// /background/messages/fetch.ts
import type { PlasmoMessaging } from "@plasmohq/messaging"

const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
  const message = await graphql(req.body.query, req.body.variables)

  res.send(message)
}

const graphql = async (payload, variables) => {} // graphql fetch logic

export default handler

// On webpage psudocode
<button click={() => window.anlanther.webtoon.findWebtoon("Relife Player")}>Test</button>

(OPTIONAL) Contribution

• I would like to fix this BUG via a PR

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.