AB7zz Comments - Answer Overflow

AB7zz

•Created by AB7zz on 9/5/2023 in #👾extension

How do I message from background to my content script?

@filthytone yo dude. Thanks a lot!! That solved my error. I thought I had put it in

background/ports/mail.ts

background/ports/mail.ts

but instead I did

backround/ports/mail.ts

backround/ports/mail.ts

and I ran the pnpm build and loading the dev build works perfectly fine now. I'm receiving the message on both sides. So relieved!

18 replies

PD🧩 Plasmo Developers

•Created by AB7zz on 9/5/2023 in #👾extension

How do I message from background to my content script?

@filthytone I'm trying to do as it says in the docs for ports. I'm facing this error when using const mailPort = usePort("mail"). It says

Argument of type 'string' is not assignable to parameter of type 'never'.

Argument of type 'string' is not assignable to parameter of type 'never'.

with a red underline below "mail". So when I Ctrl+left clicked usePort and when inside node_modules/@plasmohq/messaging/dist/hook.d.ts and checked the definition for usePort, it looks like this

declare const usePort: PlasmoMessaging.PortHook;
/**
 * TODO: Perhaps add a way to detect if this hook is being used inside CS?
 */

declare const usePort: PlasmoMessaging.PortHook;
/**
 * TODO: Perhaps add a way to detect if this hook is being used inside CS?
 */

Thats it? But on github it looks completely different.

export const usePort: PlasmoMessaging.PortHook = (name) => {
  const portRef = useRef<chrome.runtime.Port>()
  const reconnectRef = useRef(0)
  const [data, setData] = useState()

  useEffect(() => {
    if (!name) {
      return null
    }

    const { port, disconnect } = portListen(
      name,
      (msg) => {
        setData(msg)
      },
      () => {
        reconnectRef.current = reconnectRef.current + 1
      }
    )

    portRef.current = port
    return disconnect
  }, [
    name,
    reconnectRef.current // This is needed to force a new port ref
  ])

  return {
    data,
    send: (body) => {
      portRef.current.postMessage({
        name,
        body
      })
    },
    listen: (handler) => portListen(name, handler)
  }
}
/**
 * TODO: Perhaps add a way to detect if this hook is being used inside CS?
 */

export const usePort: PlasmoMessaging.PortHook = (name) => {
  const portRef = useRef<chrome.runtime.Port>()
  const reconnectRef = useRef(0)
  const [data, setData] = useState()

  useEffect(() => {
    if (!name) {
      return null
    }

    const { port, disconnect } = portListen(
      name,
      (msg) => {
        setData(msg)
      },
      () => {
        reconnectRef.current = reconnectRef.current + 1
      }
    )

    portRef.current = port
    return disconnect
  }, [
    name,
    reconnectRef.current // This is needed to force a new port ref
  ])

  return {
    data,
    send: (body) => {
      portRef.current.postMessage({
        name,
        body
      })
    },
    listen: (handler) => portListen(name, handler)
  }
}
/**
 * TODO: Perhaps add a way to detect if this hook is being used inside CS?
 */

Please help me solve this. I'd really appreciate it

18 replies

PD🧩 Plasmo Developers

•Created by AB7zz on 9/5/2023 in #👾extension

How do I message from background to my content script?

ive seen docs on how to send feom content to background. But Id really like it if someone helped me with background to content

18 replies

PD🧩 Plasmo Developers

•Created by Pallas on 7/5/2023 in #🦉pallas

As a browser extension developer using

const renderContent = () => {
    if(page == '/'){
        return <Table data={data} />
    }else if(page == '/similiar'){
        return <Similiar />
    }
  }
  return (
    <>
      {renderContent()}
      {page == "/" ? 
        <div className="flex py-5">
          <button onClick={() => setPage('/similiar')} className='m-auto bg-sky-500 text-white px-5 py-2 rounded'>View similiar products</button>
        </div>
      : page == "/similiar" ?
        <div className="flex py-5">
          <button onClick={() => setPage('/')} className='m-auto bg-sky-500 text-white px-5 py-2 rounded'>Go back</button>
        </div>
      :
        <div className="flex py-5">
          <button onClick={() => setPage('/')} className='m-auto bg-sky-500 text-white px-5 py-2 rounded'>Home</button>
        </div>

      }
    </>
  )

const renderContent = () => {
    if(page == '/'){
        return <Table data={data} />
    }else if(page == '/similiar'){
        return <Similiar />
    }
  }
  return (
    <>
      {renderContent()}
      {page == "/" ? 
        <div className="flex py-5">
          <button onClick={() => setPage('/similiar')} className='m-auto bg-sky-500 text-white px-5 py-2 rounded'>View similiar products</button>
        </div>
      : page == "/similiar" ?
        <div className="flex py-5">
          <button onClick={() => setPage('/')} className='m-auto bg-sky-500 text-white px-5 py-2 rounded'>Go back</button>
        </div>
      :
        <div className="flex py-5">
          <button onClick={() => setPage('/')} className='m-auto bg-sky-500 text-white px-5 py-2 rounded'>Home</button>
        </div>

      }
    </>
  )

This is a sample of what my code looks like.

16 replies

PD🧩 Plasmo Developers

•Created by Pallas on 7/5/2023 in #🦉pallas

As a browser extension developer using

@Joshua Perk Wow, I'm currently doing something similar. If-loops to render a specific page. I'll make sure to ping you if I find a solution

16 replies

PD🧩 Plasmo Developers

•Created by Pallas on 7/5/2023 in #🦉pallas

As a browser extension developer using

!question how do I define a context file and define some useStates and use it in a popup.tsx?

16 replies

PD🧩 Plasmo Developers

•Created by Pallas on 7/5/2023 in #🦉pallas

As a browser extension developer using

how do I define a context file and define some useStates and use it in a popup.tsx?

16 replies

PD🧩 Plasmo Developers

•Created by Pallas on 7/5/2023 in #🦉pallas

As a browser extension developer using

!question is there no navigation method in popup.tsx? like /items, /toys, etc.? So that I could use the react-router-dom package

16 replies

PD🧩 Plasmo Developers

•Created by Pallas on 7/5/2023 in #🦉pallas

As a browser extension developer using

!question is there no navigation method in popup.tsx? like /items, /toys, etc.? So that I could use the react-router-dom package

16 replies

PD🧩 Plasmo Developers

•Created by Pallas on 7/5/2023 in #🦉pallas

As a browser extension developer using

!question I want to change the display of the poopup.tsx. For example I want to render another component inside popup.tsx when user clicks a button

16 replies

Gaming

Programming