BEX:when send message from background to Quasar App, the relative event was triggered not once but many times

[heavenkiller2018]

What happened?

I followed this instruction to check the communication from background script to Quasar App

[Background Script | Quasar Framework](https://quasar.dev/quasar-cli-vite/developing-browser-extensions/background-script)

background.ts

export default bexBackground((bridge, allActiveConnections) => {
    chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    bridge.send('bex.tab.opened', { url: tab.url });
  });

}

Quasar App (as iframe form to show on common web page)

function doOnTabOpened(url) {
  console.log('New Browser Tab Openend: 🎯', url)
}

// Add our listener
$q.bex.on('bex.tab.opened', doOnTabOpened)

// Don't forget to clean it up
onBeforeUnmount(() => {
  $q.bex.off('bex.tab.opened', doOnTabOpened)
})

then I run these code, I found the event bex.tab.opened which should be triggered only once was triggered many times when I opened a new tab.

What did you expect to happen?

only be triggered once.

Reproduction URL

https://stackblitz.com/edit/quasarframework-vfcnwa

How to reproduce?

.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

BEX Mode

Platforms/Browsers

Chrome

Quasar info output

❯ quasar info

Operating System - Linux(5.15.0-50-generic) - linux/x64
NodeJs - 18.12.0

Global packages
  NPM - 8.19.2
  yarn - 1.22.19
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.10.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.1.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.15.5 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.41 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.6
  pinia - 2.0.23 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.15 -- Native-ESM powered web dev build tool
  eslint - 8.26.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - ubuntu
  enp1s0 - 192.168.8.101
  docker0 - 172.17.0.1

Relevant log output

No response

Additional context

No response

[pbkompasz]

Try

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.url) {
      bridge.send('browserTabUpdated', { tab, changeInfo })
    }
  })

[captainjapeng]

Hi! I'm also experiencing this issue, it seems that bexBackground's callback function is being called every time the browser is refreshed adding more listeners.

Have you found a workaround for the issue?

[captainjapeng]

I may have found as solution, you can check if the event is already listened using hasListeners()

  if (!chrome.tabs.onUpdated.hasListeners()) {
    chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
      // ...
    })
  }