Skip to content
BRIC BRIC Docs

Branding Your Extension

Before distributing your extension to participants, update the name, description, and icons so it reflects your study rather than the generic starter template.

Extension name and description

Section titled “Extension name and description”

Open src/extension/manifest.json in your text editor. Near the top you will see:

{
  "name": "REX Starter",
  "description": "A minimal REX study extension.",
  ...
}

Update "name" to the name you want participants to see in Chrome’s extension list and (if you publish to the Web Store) in the store listing. Update "description" with a plain-language summary of what the extension does and who it is for.

Keep the name short: Chrome truncates long names in the toolbar and extension list.

Icons

Section titled “Icons”

The manifest references icon files at three sizes:

"icons": {
  "16": "icons/icon-16.png",
  "48": "icons/icon-48.png",
  "128": "icons/icon-128.png"
}

These files live in src/extension/icons/. Replace the placeholder images with your own PNG files at the corresponding sizes:

  • 16×16: appears in the browser toolbar (very small; keep it simple)
  • 48×48: appears in the chrome://extensions management page
  • 128×128: used in the Chrome Web Store listing

Keep the filenames exactly the same (icon-16.png, icon-48.png, icon-128.png), or update the "icons" section in manifest.json if you prefer different filenames.

If you do not have custom icons yet, the placeholder icons will work; you can replace them later before publishing.

Section titled “Popup title”

If your extension uses a popup, the browser tab title and window header come from the <title> tag in the popup HTML. Open src/extension/popup.html (or the equivalent HTML file your extension uses for its UI) and update the <title> tag:

<title>My Study Extension</title>

Rebuild to verify

Section titled “Rebuild to verify”

After making these changes, rebuild the extension and reload it in Chrome:

Terminal window
npm run build

Then go to chrome://extensions, find your extension, and click the reload icon (the circular arrow). Check that your updated name and icon appear in the list. Click the icon in the toolbar to confirm the popup title reflects your changes.