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

badgeColor = '#418B8E'
      badgeIcon = '/icons/ipfs-logo-on.svg'
    } else if (state.peerCount === 0) {
      // API is online but no peers
      badgeColor = 'red'
      badgeIcon = '/icons/ipfs-logo-on.svg'
    } else {
      // API is offline
      badgeText = ''
      badgeColor = '#8C8C8C'
      badgeIcon = '/icons/ipfs-logo-off.svg'
    }
    try {
      const oldColor = colorArraytoHex(await browser.browserAction.getBadgeBackgroundColor({}))
      if (badgeColor !== oldColor) {
        await browser.browserAction.setBadgeBackgroundColor({ color: badgeColor })
        await setBrowserActionIcon(badgeIcon)
      }
      const oldText = await browser.browserAction.getBadgeText({})
      if (oldText !== badgeText) await browser.browserAction.setBadgeText({ text: badgeText })
    } catch (error) {
      console.error('Unable to update browserAction badge due to error', error)
    }
  }

_setBadgeText(text, backgroundColor) {
    // Try-catch because Firefox Android lacks badge support
    try {
      browser.browserAction.setBadgeText({ text });
      browser.browserAction.setBadgeBackgroundColor({ color: backgroundColor });
      browser.browserAction.setBadgeTextColor({ color: "white" });
    } catch (ignoredError) {
      return;
    }
  }

async function setBrowserActionIcon (iconPath) {
    const iconDefinition = { path: iconPath }
    try {
      // Try SVG first -- Firefox supports it natively
      await browser.browserAction.setIcon(iconDefinition)
    } catch (error) {
      // Fallback!
      // Chromium does not support SVG [ticket below is 8 years old, I can't even..]
      // https://bugs.chromium.org/p/chromium/issues/detail?id=29683
      // Still, we want icon, so we precompute rasters of popular sizes and use them instead
      await browser.browserAction.setIcon(rasterIconDefinition(iconPath))
    }
  }

async setRawBrowserAction(browserAction) {
			const tabId = this.tabId;
			const { path, title, popup } = browserAction;

			try {
				await browser.browserAction.setIcon({ tabId, path });
				await browser.browserAction.setTitle({ tabId, title });
				await browser.browserAction.setPopup({ tabId, popup });
			} catch (e) {
				console.warn(
					`Unable to set browser action icon for tab ${tabId}`);
			}
		}

async setRawBrowserAction(browserAction) {
			const tabId = this.tabId;
			const { path, title, popup } = browserAction;

			try {
				await browser.browserAction.setIcon({ tabId, path });
				await browser.browserAction.setTitle({ tabId, title });
				await browser.browserAction.setPopup({ tabId, popup });
			} catch (e) {
				console.warn(
					`Unable to set browser action icon for tab ${tabId}`);
			}
		}

if (id === updatedNotificationId) {
          browser.tabs.create({ url: 'https://github.com/cnwangjie/better-onetab/blob/master/CHANGELOG.md' })
        }
      })
      browser.notifications.create(updatedNotificationId, {
        type: 'basic',
        iconUrl: 'assets/icons/icon_128.png',
        title: __('ui_updated_to_ver') + ' v' + browser.runtime.getManifest().version,
        message: __('ui_click_view_changelog'),
      })
      setTimeout(() => {
        browser.notifications.clear(updatedNotificationId)
      }, 5000)
    }
  })
  browser.browserAction.onClicked.addListener(action => window.browswerActionClickedHandler(action))
  browser.contextMenus.onClicked.addListener(info => window.contextMenusClickedHandler(info))
  browser.tabs.onActivated.addListener(_.debounce(activeInfo => {
    if (window.opts.disableDynamicMenu) return
    window.coverBrowserAction(activeInfo)
    dynamicDisableMenu(activeInfo)
  }, 200))
  browser.storage.onChanged.addListener(changes => {
    console.debug('[storage changed]', changes)
    if (changes.boss_token) {
      window.boss_token = changes.boss_token
    }
    if (changes.lists) {
      if (window.opts.disableDynamicMenu) return
      setupContextMenus(window.opts)
    }
  })

export function addOneBadgeUnread () {
  return browser.browserAction.getBadgeText({})
    .then(text => {
      let num = Number(text)
      if (!(num > 0)) { num = 0 }
      setBadgeUnread(num + 1)
    })
}

onClickUpdateNotification = async versionClicked => {
    const updateNotifications = this.state.options.updateNotifications.filter(
      updateVersion => updateVersion !== versionClicked
    )

    await storage.set({ updateNotifications })

    browser.browserAction.setBadgeText({
      text:
        updateNotifications.length > 0
          ? updateNotifications.length.toString()
          : ''
    })

    browser.tabs.create({
      url: changelogs[versionClicked]
    })
  }

const updateBrowserAction = (action, tmp = false) => {
  if (!tmp) window.currentBrowserAction = action;
  const items = _.find(options.optionsList, {name: 'browserAction'}).items;
  const label = _.find(items, {value: action}).label;
  browser.browserAction.setTitle({title: label});
  browser.browserAction.setPopup({popup: ''});
  window.browswerActionClickedHandler = getBrowserActionHandler(action);
};

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

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