UI Decisions

Before customizing your extension’s interface, there are two structural decisions to make: how participants open the UI, and how consent or acknowledgement is handled. These decisions are much easier to make before you start building the rest of the extension than to change later.

---

Tab vs popup

REX extensions can present their UI in two ways.

Popup: A small panel that appears directly below the toolbar icon when participants click it. Good for simple interfaces: a status indicator, a download button, a settings page with a few fields.

Tab: A full browser tab that opens when participants click the toolbar icon. Good for more complex interfaces, multi-step flows, or when you want more screen real estate.

rex-demo opens a full tab. rex-starter uses a popup by default.

To use a popup, manifest.json should have:

"action": {
  "default_popup": "popup.html",
  "default_title": "Open Extension"
}

To open a tab instead, remove "default_popup" and handle the toolbar click in the service worker:

"action": {
  "default_title": "Open Extension"
}

Then in src/typescript/service-worker.ts, listen for the action click and open a tab:

chrome.action.onClicked.addListener(() => {
  chrome.tabs.create({ url: chrome.runtime.getURL('extension.html') })
})

---

Consent and acknowledgement

How you handle consent depends on your study design and IRB requirements. REX supports two approaches.

Option A: External consent

All consent happens before participants install the extension: on your study’s landing page, your IRB-approved consent form, or your survey platform. The extension itself does not show a consent screen. Participants arrive already consented and just need to install and enter their ID.

This is the simpler option and works well when you control the onboarding flow outside the extension.

Option B: In-extension acknowledgement

The extension shows a first-run acknowledgement screen that participants must confirm before the normal UI appears. This is appropriate when you want to ensure participants have acknowledged the study terms at the point of installation.

To implement this, add a check at the start of your extension’s UI initialization in src/typescript/extension.ts:

chrome.storage.local.get('studyAcknowledged', (result) => {
  if (result.studyAcknowledged) {
    showMainInterface()
  } else {
    showAcknowledgementScreen()
  }
})

When the participant confirms the acknowledgement screen, store the flag before proceeding:

chrome.storage.local.set({ studyAcknowledged: true }, () => {
  showMainInterface()
})

The acknowledgement screen itself is HTML/CSS you add to your popup or extension page. Keep it short and clear: what the study collects, who the researcher is, and a single confirm button.

---

Participant ID entry

REX shows an ID entry screen on first run automatically. The text displayed in that screen is configurable in config.json; you do not need to build this yourself.

See Participant Configuration for how to customize the prompt text shown to participants.