BEX MV3 - Bridge loses connection to content script after inactivity, doesn't auto-reconnect when new message is received

[emily-simon]

What happened?

My chrome extension needs to fetch content from the current tab each time the extension popup is opened. I use $q.bex.send to send a message from my Vue component to the background service worker, which passes on the message to each content script in the bridge.portList.

After upgrading to MV3, the background script loses the connection to any content scripts after 30 seconds of not opening the extension popup, and can't fetch anything from the page. It doesn't seem to try re-connecting when a new bridge message is sent from the app. I tried console logging the bridge.portList within the background script each time a message is received, which prints only ['app'] if the popup hasn't been opened in the last 30 seconds.

What did you expect to happen?

I expected the bridge to handle the message communication between the app/background/content scripts as it did in MV2.

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-mngvdn94?title=Quasar%20Framework%20-%20app-vite%20v2

How to reproduce?

1. Go to the provided reproduction link
2. Run quasar build -m bex -T chrome
3. Upload generated extension zip to chrome://extensions (dist/bex-chrome/Packaged.stackblitz-quasar-app-vite-v2.zip)
4. Go to another tab and refresh. Open extension popup and click the SHOW BACKGROUND PORTS button. ["content@my-content-script-xxxx", "app"] will be shown below the button.
5. Wait 30+ seconds and open the extension popup again. When the SHOW BACKGROUND PORTS button is clicked, only ["app"] is printed below the button.

Flavour

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

Areas

BEX Mode

Platforms/Browsers

Chrome

Quasar info output

Operating System - Linux(5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36) - linux/x64
NodeJs - 18.20.3

Global packages
  NPM - 10.2.3
  yarn - 1.22.19
  pnpm - 8.15.6
  bun - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.18.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.2.0 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.17 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.13 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.5.0
  pinia - Not installed
  vite - 6.2.3 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.23.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.25.1 -- The cross-platform WebAssembly binary for esbuild, a JavaScript bundler.
  typescript - Not installed
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - quasarframeworkstackblitztempl-chop
  en0 - 192.168.1.104

Relevant log output

Additional context

No response

[JeremyPasco]

Same here. I found a workaround: https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers#keep_a_service_worker_alive_continuously

According to the documentation, service workers are terminated when inactive, which wasn't the case for background scripts in MV2.
The suggested workaround in the docs involves keeping the service worker alive indefinitely. However, this trick is forbidden by extension stores and is therefore only suitable for enterprise use.

Instead of keeping the service worker alive, maybe we could restart it when activity resumes? or trigger restart when a message fails to be sent through bridge?

[emily-simon]

Here is what I ended up doing as a workaround:

background.ts

function openExtension() {
  // reset flag when extension is opened
  attemptedContentScriptReconnect = false
  // ...
}

chrome.action.onClicked.addListener(openExtension)

bridge.on('initialize', async (message) => {
  await checkCurrentTabContentScriptStatus()
  // continue passing to content script
    }
  })
})

// fix - extension was getting into a state where content script of current tab was not found in bridge.portList
// this function re-injects a content script into the current tab
async function checkCurrentTabContentScriptStatus() {
  // chrome-only issue
  if (!chrome || attemptedContentScriptReconnect) return

  const currentTabs = await chrome.tabs.query({
    active: true,
    currentWindow: true,
    windowType: 'normal'
  })

  if (currentTabs?.[0]) {
    const currentUrl = currentTabs[0].url

    // ignore chrome/devtool windows
    if (currentUrl?.match(/(chrome|chrome-extension):\/\//gi)?.length) {
      return
    }

    const matchingPort = false
    Object.values(bridge.portMap).find((port) => {
      return port.sender?.url === currentUrl
    })

    if (!matchingPort) {
      attemptedContentScriptReconnect = true
      await injectContentScriptIntoCurrentTab(currentTabs[0])
      await new Promise((r) => setTimeout(r, 1000))
    }
  }
}

async function injectContentScriptIntoCurrentTab(tab: chrome.tabs.Tab) {
  if (tab.id && tab.url) {
    const contentScripts = chrome.runtime.getManifest().content_scripts ?? []

    for (const cs of contentScripts) {
      const includeGlobsAsRegex = cs.include_globs?.map((glob) => convertMatchPatternToRegex(glob))
      const excludeGlobsAsRegex = cs.exclude_globs?.map((glob) => convertMatchPatternToRegex(glob))

      const matchesIncludeGlob =
        !includeGlobsAsRegex?.length ||
        includeGlobsAsRegex?.find((glob) => !!tab.url?.match(glob)?.length)
      const matchesExcludeGlob = excludeGlobsAsRegex?.find((glob) => !!tab.url?.match(glob)?.length)

      if (matchesIncludeGlob && !matchesExcludeGlob) {
        const target = { tabId: tab.id, allFrames: cs.all_frames }
        if (cs.js?.[0])
          await chrome.scripting.executeScript({
            files: cs.js,
            target
          })
      }
    }
  }
}

function convertMatchPatternToRegex(pattern: string) {
  return pattern.replaceAll('.', '\\.').replaceAll('/', '\\/').replaceAll('*', '.*')
}