What is the correct/best way to get $q.bex/bridge in a boot file or a pinia store?

[richterdennis]

What is the correct/best way to get $q.bex/bridge in a boot file or a pinia store?

When I open my bex popup i want to load the state from the background script. The only way to communicate with the background script is through the $q.bex/bridge. But I don't have access to this.$q.bex in a boot file or in a pinia store function and there is nothing like useBridge.

My best approach is something like this:

const globalProperties = app.config.globalProperties;
let bridge = null;

while (!bridge) {
	await wait(50);
	bridge = globalProperties.$q?.bex;
}

But this is ofc not a good way. How do I do this the correct way?

[Flamenco]

It appears the bridge is exposed on the window object.
This is not really documented though.

You can roll your own function:

function useBridge() {
  return window.QBexBridge
}

const bridge = useBridge() 

To get typescript to stop whining, try adding

declare global {
  interface Window {
    QBexBridge: any
  }
}

For reference, here is where the global is initialized. It happens right before mount is called.

[derrickorama]

I ran into this same problem trying to use QBexBridge in a boot file used in a side panel. The best way I found was to listen for the "app" connection in the background script and send a message indicating QBexBridge is initialized.

In your background file:

chrome.runtime.onConnect.addListener((port) => {
  if (port.name.startsWith('app:')) { // name will be app:<random uid>
    chrome.runtime.sendMessage('ready');
  }
});

And in your boot file:

import { boot } from 'quasar/wrappers';

export default boot(() => {
  chrome.runtime.onMessage.addListener((message) => {
    if (message === 'ready') {
      console.log('window.QBexBridge:', window.QBexBridge);
      // do things that rely on QBexBridge
    }
  });
});