Chrome extension send message from onInstall in backgroundjs to own extension javascript code

Question

I need to check when the extension is installed and change my React state accordingly. I use chrome.runtime.onInstalled on my background.js where I sendMessage to my react code - which is the content script of my extension.

background.js

 async function getCurrentTab() {
  let queryOptions = { active: true, currentWindow: true };
  let [tab] = await chrome.tabs.query(queryOptions);
  return tab;
}
chrome.runtime.onInstalled.addListener((details) => {
  if (details?.reason === 'install') {
    console.log('installed backgroundjs')

    const tab = await getCurrentTab()
   chrome.tabs.sendMessage(tab.id, { target: 'onInstall' })
    openNewTab()
   }
 })

In my react Component - Dashboard.js

useEffect(() => {
    if (extensionApiObject?.runtime) {
      chrome.runtime.sendMessage({ target: 'background', message: 'check_installation', })

      console.log('extension')
      chrome.runtime.onMessage.addListener(handleMessage)
    }


    return () => {
      if (extensionApiObject?.runtime) {
        chrome.runtime.onMessage.removeListener(handleMessage)
      }
    }
  })

function handleMessage(msg) {
    console.log('handle messag func', msg)

    if (msg.target === 'onInstall') {
      console.log('extension on Install')
      setShowWelcomeMessage(true)
    }
  }

What confuse me is that I already have a similar implementation for a different message that works without problem but in there I listen to chrome.runtime.onMessage() not chrome.runtime.onInstalled()

I wonder if I misunderstand how onInstalled method work and I cannot sendMessage from it?

UPDATE: I change my code as suggested by @wOxxOm, I used chrome.tabs.sendMessage but still no luck.

chrome.runtime.onInstalled doesn't take as argument req, sender, sendResponse like other listener and I wonder if that means it will not be able to send a message from there :/

Answer 1

After @wOxxOm suggestions, I ended up removing the sendMessage solution and simply add an extra parameter to the url whenever I open a new tab after installation:

background.js

function openNewTab(param) {
  chrome.tabs.create({
    url:  param ? `chrome://newtab?${param}` : 'chrome://newtab',
  })
}

chrome.runtime.onInstalled.addListener((details) => {
  if (details?.reason === 'install') {
   chrome.tabs.sendMessage(tab.id, { target: 'onInstall' })
    openNewTab('installed')
   }
 })

on my web app I just need to check the param and I can decide which UI to show