[Q/A] How to call BGSW from 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 "~communication/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.

[louisgv]

You cannot call sendToBackground in main world - the "main world" concept is related to extension sandbox isolation. You will need to either use the relay API or the pub/sub API abstraction to route message from main world to your extension.

Note that the pub/sub API uses externally_connectable feature, which requires a specific website url as a target.

[louisgv]

We should add a note on the docs about "mainworld" and "webpage" (these words mean the same thing in the docs)

[Anlanther]

I have changed it to use sendToBackgroundViaRelay instead, but I seem to be getting a Promise {< pending >} and my console for both the service worker and content seem to be empty of logs (note that I have also tried this without the then() and the same function in the /background/messages/fetch.ts worked fine when implementing it in a normal, not sandboxed, content script).

I've actually played with the pub/sub API abstraction, although my question for it is where would I put the API calls? The port.onMessage.addListener receives the payload and is already in the bgsw, which doesn't seem to have any place to put any async calls (i.e. await cannot be found). From my experience, I was only able to get past this through a single message pass and having return true to keep the passage open for when a response is returned through a .then(), but since its a long lived port, I'm not sure how to do the same here.

[Anlanther]

Realised what the problem was. Misread the documentation. An additional content script needed to be added with the following:

import { relayMessage } from "@plasmohq/messaging"

relayMessage({
  name: "fetch"
})

Thanks 🙂