How to use the webextension-polyfill.webNavigation function in webextension-polyfill

filter.write(event.data);
      filter.disconnect();
    }

    return {};
  }

  browser.webRequest.onBeforeRequest.addListener(
    listener,
    {urls: [""], types: ["main_frame"]},
    ["blocking"]
  );

  // Load results from cache if the page is cached
  browser.webNavigation.onCommitted.addListener((details) => {
    if (details.url in statusCache) {
      updateBrowserAction(statusCache[details.url], details.tabId);
    } else if (getPubkey(patterns, details.url)) {
      // We should never get here, but if there are issues, at least show an icon indicating of that.
      updateBrowserAction(unsureSignature, details.tabId);
    }
  });
} else {
  browser.runtime.onMessage.addListener(
    (request, sender) => {
      processPage(request.content, extractSignature(request.signature), sender.url, sender.tab.id)
    }
  );
}

function registerListeners () {
    const onBeforeSendInfoSpec = ['blocking', 'requestHeaders']
    if (browser.webRequest.OnBeforeSendHeadersOptions && 'EXTRA_HEADERS' in browser.webRequest.OnBeforeSendHeadersOptions) {
      // Chrome 72+  requires 'extraHeaders' for access to Referer header (used in cors whitelisting of webui)
      onBeforeSendInfoSpec.push('extraHeaders')
    }
    browser.webRequest.onBeforeSendHeaders.addListener(onBeforeSendHeaders, { urls: [''] }, onBeforeSendInfoSpec)
    browser.webRequest.onBeforeRequest.addListener(onBeforeRequest, { urls: [''] }, ['blocking'])
    browser.webRequest.onHeadersReceived.addListener(onHeadersReceived, { urls: [''] }, ['blocking', 'responseHeaders'])
    browser.webRequest.onErrorOccurred.addListener(onErrorOccurred, { urls: [''], types: ['main_frame'] })
    browser.webRequest.onCompleted.addListener(onCompleted, { urls: [''], types: ['main_frame'] })
    browser.storage.onChanged.addListener(onStorageChange)
    browser.webNavigation.onCommitted.addListener(onNavigationCommitted)
    browser.webNavigation.onDOMContentLoaded.addListener(onDOMContentLoaded)
    browser.tabs.onActivated.addListener(onActivatedTab)
    if (browser.windows) {
      browser.windows.onFocusChanged.addListener(onWindowFocusChanged)
    }
    browser.runtime.onMessage.addListener(onRuntimeMessage)
    browser.runtime.onConnect.addListener(onRuntimeConnect)

    if (runtime.hasNativeProtocolHandler) {
      log('registerStringProtocol available. Adding ipfs:// handler')
      browser.protocol.registerStringProtocol('ipfs', createIpfsUrlProtocolHandler(() => ipfs))
    } else {
      log('no browser.protocol API, native protocol will not be registered')
    }
  }

function registerListeners () {
    const onBeforeSendInfoSpec = ['blocking', 'requestHeaders']
    if (browser.webRequest.OnBeforeSendHeadersOptions && 'EXTRA_HEADERS' in browser.webRequest.OnBeforeSendHeadersOptions) {
      // Chrome 72+  requires 'extraHeaders' for access to Referer header (used in cors whitelisting of webui)
      onBeforeSendInfoSpec.push('extraHeaders')
    }
    browser.webRequest.onBeforeSendHeaders.addListener(onBeforeSendHeaders, { urls: [''] }, onBeforeSendInfoSpec)
    browser.webRequest.onBeforeRequest.addListener(onBeforeRequest, { urls: [''] }, ['blocking'])
    browser.webRequest.onHeadersReceived.addListener(onHeadersReceived, { urls: [''] }, ['blocking', 'responseHeaders'])
    browser.webRequest.onErrorOccurred.addListener(onErrorOccurred, { urls: [''], types: ['main_frame'] })
    browser.webRequest.onCompleted.addListener(onCompleted, { urls: [''], types: ['main_frame'] })
    browser.storage.onChanged.addListener(onStorageChange)
    browser.webNavigation.onCommitted.addListener(onNavigationCommitted)
    browser.webNavigation.onDOMContentLoaded.addListener(onDOMContentLoaded)
    browser.tabs.onActivated.addListener(onActivatedTab)
    if (browser.windows) {
      browser.windows.onFocusChanged.addListener(onWindowFocusChanged)
    }
    browser.runtime.onMessage.addListener(onRuntimeMessage)
    browser.runtime.onConnect.addListener(onRuntimeConnect)

    if (runtime.hasNativeProtocolHandler) {
      log('registerStringProtocol available. Adding ipfs:// handler')
      browser.protocol.registerStringProtocol('ipfs', createIpfsUrlProtocolHandler(() => ipfs))
    } else {
      log('no browser.protocol API, native protocol will not be registered')
    }
  }

async function syncState(quality) {
  if (!quality) {
    var {quality} = await storage.get('quality', 'sync');
  }

  const messageTargets = {};

  const tabs = await browser.tabs.query({});
  for (const tab of tabs) {
    const tabId = tab.id;

    const frames = await browser.webNavigation.getAllFrames({tabId});
    for (const frame of frames) {
      const origin = new URL(frame.url).origin;

      if (youtubeOriginRx.test(origin) && !messageTargets[origin]) {
        messageTargets[origin] = {tabId, frameId: frame.frameId};
      }
    }
  }

  const qualityData = prepareQualityData(quality);

  for (const {tabId, frameId} of Object.values(messageTargets)) {
    await executeCode(
      `
        localStorage.setItem('yt-player-quality', '${qualityData}');
      `,

async detach() {
    if (!this.attached) {
      return
    }
    await this.detachFromTab(this.lastAttachedTabId)
    this.lastAttachedTabId = undefined
    this.attached = false
    browser.tabs.onActivated.removeListener(this.tabsOnActivatedHandler)
    browser.windows.onFocusChanged.removeListener(
      this.windowsOnFocusChangedHandler
    )
    browser.tabs.onRemoved.removeListener(this.tabsOnRemovedHandler)
    browser.webNavigation.onCreatedNavigationTarget.removeListener(
      this.webNavigationOnCreatedNavigationTargetHandler
    )
    browser.runtime.onMessage.removeListener(this.addCommandMessageHandler)
  }

async function getFramePos(tabId, frameId, frameIndex) {
  let x = 0;
  let y = 0;

  while (true) {
    frameId = (await browser.webNavigation.getFrame({
      tabId,
      frameId
    })).parentFrameId;
    if (frameId === -1) {
      break;
    }

    const [data] = await executeCode(
      `(${getFrameClientPos.toString()})(${frameIndex})`,
      tabId,
      frameId
    );

    frameIndex = data.currentIndex;
    x += data.x;
    y += data.y;

}
});

browser.runtime.getPlatformInfo().then((info) => {
  switch (info.os) {
    case 'android':
      break;
    default:
      setupPageAction();
      setupContextMenus();
      setupCommands();
      break;
  }
});

browser.webNavigation.onHistoryStateUpdated.addListener(({ url }) => {
  logger.info(`onHistoryStateUpdated: ${url}`);
  getContentScriptPorts().forEach((p) => {
    p.postMessage({
      type:      'history-state-updated',
      targetUrl: url,
    });
  });
});

attach() {
    if (this.attached) {
      return
    }
    this.attached = true
    browser.tabs.onUpdated.addListener(this.tabsOnUpdatedHandler)
    browser.runtime.onMessage.addListener(this.frameLocationMessageHandler)
    browser.webNavigation.onCreatedNavigationTarget.addListener(
      this.newTabHandler
    )
    browser.runtime.onMessage.addListener(this.commandVariablesHandler)
  }