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
  }
)

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