How to identifying URL/location change

[djakaitis]

I can't seem to find where/how the normal chrome.tabs api's are exposed and can only get standard window events working due to Plasmo using a shadow dom.

Is there a suggested way to identify URL or page change events?

[louisgv]

due to Plasmo using a shadow dom.

The shadowDOM only isolates style, all API within the DOM and CS sandbox are available. chrome.tab APIs are not exposed in the CS context: https://developer.chrome.com/docs/extensions/reference/tabs/#overview

Is there a suggested way to identify URL or page change events?

Use the bgsw. If you need to trigger events, send it down to BGSW via https://docs.plasmo.com/framework/messaging

[robertsamarji]

For anyone else looking for a code example of how to identify a URL change, this is how I did it:

background.ts

import { getPort } from "@plasmohq/messaging/background"

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  const  urlChangePort = getPort('url-change')

  if (tab.status === 'complete') {    
    urlChangePort.postMessage({
      body: {
        message: tab.url,
      },
    })
  }
})

You can then listen to this in your CSUI using the usePort() hook.

Couple things that took me a while to figure out:

• You have to import from @plasmohq/messaging/background not @plasmohq/messaging/port. This is not documented.
• You have to call getPort() inside the listener function. It will error if you try to call getPort() before it.

[flexchar]

@robertsamarji, can you also share the examples from other files where you listen/accept the message? :)

[robertsamarji]

Sure.

First, create the url-change port to forward messages.

background/ports/url-change.ts

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

const handler: PlasmoMessaging.PortHandler = async (req, res) => {
  res.send(req.body)
}

export default handler

Then you can listen to port messages in a CSUI.

contents/example-csui.tsx

import { useEffect } from "react"
import { usePort } from "@plasmohq/messaging/hook"

...

const ExampleCSUI = () => {
  const urlChangePort = usePort("url-change")
  
  useEffect(() => {
    console.log(urlChangePort.data?.body.message)
  }, [urlChangePort.data])
  
...

export default ExampleCSUI

[flexchar]

I truly appreciate that Robert. I come from a little bit different context. If you have time, I'd appreciate your input.

I'm attempting to send a message from background.js to a CS (Content Script without UI) running on the MAIN world. I also don't use React. I am stuck with this.

I managed to get working to send a message from CS in the MAIN to background.js by placing another CS with import { relay } from '@plasmohq/messaging/relay'; function.

I'm greatly lost in this messaging API. Perhaps you went through the similar pain points of learning how Plamso Messaging API works and would be open to share the gotchas. This seems like a really powerful framework nevertheless.

[robertsamarji]

Unfortunately I've not come across that case yet. If I do and manage to figure it out, I'll post what I did here.

[imzivko]

For anyone else looking for a code example of how to identify a URL change, this is how I did it:

background.ts

import { getPort } from "@plasmohq/messaging/background"

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  const  urlChangePort = getPort('url-change')

  if (tab.status === 'complete') {    
    urlChangePort.postMessage({
      body: {
        message: tab.url,
      },
    })
  }
})

You can then listen to this in your CSUI using the usePort() hook.

Couple things that took me a while to figure out:

• You have to import from @plasmohq/messaging/background not @plasmohq/messaging/port. This is not documented.
• You have to call getPort() inside the listener function. It will error if you try to call getPort() before it.

thanks!!