Send message from content script to vue component

[capoia]

Hi guys, how are you ?

How would I send a content script message to a component in vue?

For example, I'm making an extension for whatsapp, and it loads well before whatsapp, so I put an observer so that when whatsapp actually loads, it notifies my component.

If i try something like this:

contentScript:

sendMessage('loading-whatsapp', true)

Loading.vue:

onMessage('loading-whatsapp', ({ data }) => {
  console.log(`[loading.vue] Whatsapp fully charged`)
})

Console give me error: Error: [webext-bridge] No handler registered in 'background' to accept messages with id 'loading-whatsapp'

[amfischer]

@capoia did you figure this out?

I'm not familiar with this framework but I've worked with chrome extensions before. In general when you send messages in an extension you need to 1) send the message and 2) add a listener to receive the message. Based on the console error it looks like 2) is the problem.

In your background script you need to add the equivalent of chrome.runtime.onMessage.addListener

The Google docs on message passing are short and helpful https://developer.chrome.com/docs/extensions/mv3/messaging/#simple