Not seeing background hits with use of relay

Tried out several things to have the relay package hit my BGSW. Currently attempting this:

import type { PlasmoCSConfig } from "plasmo"

import { sendToBackgroundViaRelay } from "@plasmohq/messaging"

export const config: PlasmoCSConfig = {
    matches: ["<all_urls>"],
    run_at: "document_start",
    world: "MAIN"
}

window.hello = {
    "name": "hello",
    "version": "0.0.0",
    tryFunc: async () => {
        console.log("Extension is running")
        await sendToBackgroundViaRelay({
            name: "request"
        })
    }
}

import type { PlasmoCSConfig } from "plasmo"

import { sendToBackgroundViaRelay } from "@plasmohq/messaging"

export const config: PlasmoCSConfig = {
    matches: ["<all_urls>"],
    run_at: "document_start",
    world: "MAIN"
}

window.hello = {
    "name": "hello",
    "version": "0.0.0",
    tryFunc: async () => {
        console.log("Extension is running")
        await sendToBackgroundViaRelay({
            name: "request"
        })
    }
}

and the background/messages/request.ts looks like this:

import type { PlasmoMessaging } from "@plasmohq/messaging"

const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
  console.log("request handler", req.body)
}

export default handler

import type { PlasmoMessaging } from "@plasmohq/messaging"

const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
  console.log("request handler", req.body)
}

export default handler

Any ideas on what I may be messing up?

14 Replies

alankOP•2y ago

Also tried a similar example to this and didn't see the request in the BGSW land. https://github.com/PlasmoHQ/examples/blob/main/with-messaging/contents/index.ts

GitHub

examples/index.ts at main · PlasmoHQ/examples

🔰 Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - examples/index.ts at main · PlasmoHQ/examples

alankOP•2y ago

Here is what my src/tabs/test.tsx looks like when attempting to sendViaRelay from a tab.

import { sendViaRelay } from "@plasmohq/messaging"

function Test() {
  // This is the same as the `useEffect` hook in React

  return (
    <div>
      <button
        onClick={async () => {
          console.log("try to send to relay")
          const hydrated = await sendViaRelay({
            name: "request" as const
          })

          console.log(hydrated)
        }}>
        Hydrate options
      </button>
    </div>
  )
}

export default Test

import { sendViaRelay } from "@plasmohq/messaging"

function Test() {
  // This is the same as the `useEffect` hook in React

  return (
    <div>
      <button
        onClick={async () => {
          console.log("try to send to relay")
          const hydrated = await sendViaRelay({
            name: "request" as const
          })

          console.log(hydrated)
        }}>
        Hydrate options
      </button>
    </div>
  )
}

export default Test

lab•2y ago

Hahah it's tricky - so a send via relay in the mainworld needs to communicate with another relay in the isolated world - basically another content script with just a relay So that it can then propagate down to bgsw

alankOP•2y ago

Clutch!!! Added this as another content script and it worked:

import type { PlasmoCSConfig } from "plasmo"

import { relayMessage, sendToBackground } from "@plasmohq/messaging"
import { relay } from "@plasmohq/messaging/relay"

export const config: PlasmoCSConfig = {
  matches: ["<all_urls>"],
}

relay(
  {
    name: "request" as const
  },
  async (req) => {
    const result = await sendToBackground(req)
    return result
  }
)

import type { PlasmoCSConfig } from "plasmo"

import { relayMessage, sendToBackground } from "@plasmohq/messaging"
import { relay } from "@plasmohq/messaging/relay"

export const config: PlasmoCSConfig = {
  matches: ["<all_urls>"],
}

relay(
  {
    name: "request" as const
  },
  async (req) => {
    const result = await sendToBackground(req)
    return result
  }
)

lab•2y ago

@alank can you make a PR to the messaging example or maybe a guide on the docs about the above - I bet it would save a lot of poor soul venturing into this part of the extension world lol

alankOP•2y ago

Can do, glad to help out 😄 and thank you for your time on this!

YAGPDB.xyz•2y ago

Gave +1 Rep to @louis

Mael•2y ago

Hey! I just bumped into your thread and was wondering how you got this working, so basically you: 1. Injected the "tryFunc" into the main world 2. Created a background message handler 3. Created a new content script that receives the relay message and sends down the message to the background script? 4. Sent the same message from tabs? I'm having the same issue but from a different webapp trying to send a relay message to my CSUI script and down to the BGSW but I can't get it to work

alankOP•2y ago

Correct. Although right now I’m not doing it through the tab but rather calling the func from chrome devtools Will ensure the tabs works and confirm so I cant seem to get the injected object into the tab although I can have it in an normal page

Arcane•2y ago

@alank has reached level 5. GG!

Mael•2y ago

I ended up switching to runtime.sendMessage with runtime.onExternalMessage

alankOP•2y ago

that fixed it for you?

Mael•2y ago

Yep. But it's because my use case is tricky ig: I have a whole different web app in a different repo and I wanna communicate with the extension to share the auth info. I ended up adding the url to "externally_connectable" inside the manifest and communicating with the extension via chrome.runtime.sendMessage. It works.

alankOP•2y ago

https://github.com/PlasmoHQ/examples/pull/37

GitHub

Add main world to bgsw flow example to with-messaging by alanorwick...

Added example of the secondary content script to handle main world content script relays. I was unable to see the injected window.relay on http://localhost:1947/ so I left matching params as <al...

Gaming

Programming

Not seeing background hits with use of relay