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

requestAnimationFrame(async () => {
      const tabId = state.currentTab ? { tabId: state.currentTab.id } : null
      if (browser.pageAction && tabId && await browser.pageAction.isShown(tabId)) {
        // Get title stored on page load so that valid transport is displayed
        // even if user toggles between public/custom gateway after the load
        state.pageActionTitle = await browser.pageAction.getTitle(tabId)
        emitter.emit('render')
      }
    })

async function updatePageActionIndicator (tabId, url) {
    // Chrome does not permit for both pageAction and browserAction to be enabled at the same time
    // https://github.com/ipfs-shipyard/ipfs-companion/issues/398
    if (runtime.isFirefox && ipfsPathValidator.isIpfsPageActionsContext(url)) {
      if (url.startsWith(state.gwURLString) || url.startsWith(state.apiURLString)) {
        await browser.pageAction.setIcon({ tabId: tabId, path: '/icons/ipfs-logo-on.svg' })
        await browser.pageAction.setTitle({ tabId: tabId, title: browser.i18n.getMessage('pageAction_titleIpfsAtCustomGateway') })
      } else {
        await browser.pageAction.setIcon({ tabId: tabId, path: '/icons/ipfs-logo-off.svg' })
        await browser.pageAction.setTitle({ tabId: tabId, title: browser.i18n.getMessage('pageAction_titleIpfsAtPublicGateway') })
      }
      await browser.pageAction.show(tabId)
    }
  }

function doSetBrowserExtensionIcon(tabId, pathTemplate) {
  const isChrome = checkIsChrome();
  const sizes = isChrome ? [16, 24, 32] : [19, 38];
  const suffix = isChrome ? '-chrome.png' : '-cliqz.png';
  const iconSet = {};

  sizes.forEach((size) => {
    iconSet[size] = pathTemplate.replace('{size}', `${size}x${size}`).replace('{suffix}', suffix);
  });

  browser.pageAction.setIcon({
    path: iconSet,
    tabId,
  });
}

function doSetBrowserExtensionIcon(tabId, pathTemplate) {
  const isChrome = checkIsChrome();
  const sizes = isChrome ? [16, 24, 32] : [19, 38];
  const suffix = isChrome ? '-chrome.png' : '-cliqz.png';
  const iconSet = {};

  sizes.forEach((size) => {
    iconSet[size] = pathTemplate.replace('{size}', `${size}x${size}`).replace('{suffix}', suffix);
  });

  browser.pageAction.setIcon({
    path: iconSet,
    tabId,
  });
}

async function setPageAction(tabId) {
  const options = await storage.get(
    ['engines', 'disabledEngines', 'searchAllEnginesAction'],
    'sync'
  );
  const enEngines = await getEnabledEngines(options);
  const hasListener = browser.pageAction.onClicked.hasListener(onActionClick);

  if (enEngines.length === 1) {
    if (!hasListener) {
      browser.pageAction.onClicked.addListener(onActionClick);
    }
    browser.pageAction.setTitle({
      tabId: tabId,
      title: getText(
        'actionTitle_engine_main',
        getText(`engineName_${enEngines[0]}_short`)
      )
    });
    browser.pageAction.setPopup({tabId: tabId, popup: ''});
    return;
  }

tabId: tabId,
      title: getText('actionTitle_allEngines_main')
    });
    browser.pageAction.setPopup({tabId: tabId, popup: ''});
    return;
  }

  browser.pageAction.setTitle({tabId: tabId, title: getText('extensionName')});
  if (enEngines.length === 0) {
    if (!hasListener) {
      browser.pageAction.onClicked.addListener(onActionClick);
    }
    browser.pageAction.setPopup({tabId: tabId, popup: ''});
  } else {
    if (hasListener) {
      browser.pageAction.onClicked.removeListener(onActionClick);
    }
    browser.pageAction.setPopup({
      tabId: tabId,
      popup: '/src/action/index.html'
    });
  }
}

function updateBrowserAction(data, tabId) {
  browser.pageAction.setIcon({
    path: data.icon,
    tabId,
  });

  browser.pageAction.setTitle({
    title: data.title,
    tabId,
  });

  const pageAction = chrome ? chrome.pageAction : browser.pageAction;
  if (data.disable) {
    pageAction.hide(tabId);
  } else {
    pageAction.show(tabId);
  }
}