useOmniboxQuery.ts

function useOmniboxQuery() {
  const query = ref<string>();

  type EventConfig<T extends (...args: any[]) => any> = [
    bus: Events.Event<T>,
    listener: T
  ];

  const omniboxListeners: EventConfig<any>[] = [
    [
      browser.omnibox.onInputStarted,
      () => {
        query.value = "";
      },
    ],

    [
      browser.omnibox.onInputChanged,
      (
        text: string,
        suggest: (suggestResults: Omnibox.SuggestResult[]) => void
      ) => {
        query.value = text;
      },
    ],

    [
      browser.omnibox.onInputCancelled,
      () => {
        query.value = undefined;
      },
    ],

    [
      browser.omnibox.onInputEntered,
      () => {
        onEnterListeners.forEach((listener) => listener(query.value!));
      },
    ],
  ];

  const onEnterListeners: ((query: string) => void)[] = [];

  function start() {
    omniboxListeners.forEach(([bus, listener]) => {
      bus.addListener(listener);
    });
  }

  function stop() {
    omniboxListeners.forEach(([bus, listener]) => {
      bus.removeListener(listener);
    });
  }

  const onEntered: Events.Event<(text: string) => void> = {
    addListener(callback) {
      onEnterListeners.push(callback);
    },
    removeListener(callback) {
      onEnterListeners.splice(onEnterListeners.indexOf(callback), 1);
    },
    hasListener(callback) {
      return onEnterListeners.includes(callback);
    },
  };

  start();

  return {
    query,
    start,
    stop,
    onEntered,
  };
}

const { query, onEntered } = useOmniboxQuery();

onEntered.addListener(() => {
  console.log("selected", query.value);
});