async function initPopup() {
  if (BROWSER_BRAND === 'chrome') {
    fillDevToolsShortcut();
  }
  const browserBrandEl = dom.find(`.browser-brand--${BROWSER_BRAND}`);
  browserBrandEl.classList.remove('hidden');

  const generateReportButton = dom.find('button.button--generate');
  const psiDisclaimerEl = dom.find('.psi-disclaimer');
  const errorMessageEl = dom.find('.errormsg');
  const optionsFormEl = dom.find('.options__form');

  /** @type {URL} */
  let siteUrl;
  /** @type {SettingsController.Settings} */
  let settings;
  try {
    siteUrl = await getSiteUrl();
    settings = await SettingsController.loadSettings();
  } catch (err) {
    // Disable everything. A navigation might allow for a working state,
    // but it's very hard to keep an extension popup alive during a popup
    // so we don't need to handle reacting to it.
    generateReportButton.disabled = true;
    psiDisclaimerEl.remove();
    errorMessageEl.textContent = err.message;
    return;
  }

  // Generate checkboxes from saved settings.
  generateBackendOptionsList(settings);
  generateCategoryOptionsList(settings);
  generateLocaleOptionsList(settings);
  configureVisibleSettings(settings);
  const selectedDeviceEl = dom.find(`.options__device input[value="${settings.device}"]`);
  selectedDeviceEl.checked = true;

  generateReportButton.addEventListener('click', () => {
    onGenerateReportButtonClick(settings.backend, siteUrl.href, settings);
  });

  optionsFormEl.addEventListener('change', () => {
    settings = readSettingsFromDomAndPersist();
    configureVisibleSettings(settings);
  });
}
Initializes the popup's state and UI elements.