TrustBnBDocs

Development

TrustBnB is TypeScript with no framework: a content script, a popup, and a scoring core shared with the data scripts. It builds with Vite and tests with Vitest.

Setup

Requires Node 20.11 or later (CI uses 22).

git clone https://github.com/guilyx/trustbnb.git
cd trustbnb
npm install
npm run build        # dist/chrome and dist/firefox, with demo data

Load the build:

  • Chrome, Edge, Brave: chrome://extensions → Developer mode → Load unpacked → dist/chrome.
  • Firefox: about:debugging#/runtime/this-firefox → Load Temporary Add-on… → dist/firefox/manifest.json.

After a change, run npm run build again and click the extension's reload button. Reload any open Airbnb tabs too.

The first build uses synthetic demo data for three cities, and the popup shows a "Demo data" tag. For real data, run npm run data (a few minutes) and build again.

Commands

Command What it does
npm run build Builds both browsers into dist/
npm run release Same, plus store zips and data-sources.json; refuses demo data
npm run data Downloads Inside Airbnb data into data/models.json (options)
npm run data:demo Writes synthetic data instead
npm test Unit and DOM tests (Vitest, happy-dom)
npm run typecheck TypeScript, for the extension and the Node scripts
npm run lint oxlint
npm run site Builds the website, with these docs under /docs, into dist/web
npm run docs Builds only these docs, into dist/site

Set TRUSTBNB_VERSION to build a different version than package.json's (the monthly data refresh uses this).

Project layout

core/
  trustScore.ts       the score: shrinkage, ranking, curves, tiers
  models.ts           compact city data, grading from it, city matching
  brand.ts            colours and the honest star's geometry
extension/
  manifest.json       Manifest V3 (the Airbnb sites are added at build time)
  popup.html          popup markup and styles
  src/content.ts      runs on Airbnb: badges, listing panel, rewritten numbers
  src/scan.ts         reads ratings, listing ids and city clues from Airbnb pages
  src/popup.ts        the popup
  src/status.ts       the popup's status line
  src/domains.ts      Airbnb's country sites
  src/settings.ts     settings, synced through the browser
scripts/
  build.ts            extension build and release zips
  fetch-data.ts       Inside Airbnb download
  data-changes.ts     compares two releases' data (monthly refresh)
  build-site.ts       the website (Vercel)
  build-docs.ts       these docs
site/
  pages/              website pages (HTML)
  assets/about.css    website styles, on top of the docs' styles
  src/explainer.ts    the interactive examples on /how-it-works
docs/                 these docs' pages
store/                store listing artwork
vercel.json           how Vercel builds and serves the website

core/ has no browser or Node dependencies, so the extension and the data scripts share it.

How the build works

scripts/build.ts compiles the content script (as one IIFE file) and the popup with Vite. The rating data from data/models.json is injected at compile time as a constant, so the extension never loads data at runtime. It then copies the icons and font, and writes a manifest for each browser. The Firefox one adds the add-on id and Mozilla's data-collection declaration.

With --release it also writes:

  • trustbnb-<version>-chrome.zip and trustbnb-<version>-firefox.zip, ready for the stores,
  • trustbnb-<version>-source.zip: every file in git plus the data, for Mozilla's review,
  • data-sources.json: each city's collection date.

Tests

npm test
  • core/*.test.ts: the score, the compact model's accuracy, city matching.
  • scripts/lib/*.test.ts: Inside Airbnb parsing, release data comparison.
  • extension/src/scan.test.ts: reading ratings from HTML shaped like Airbnb's.
  • extension/src/content.test.ts: the content script end to end in happy-dom: badges, panel, rewritten numbers, restoring them.
  • extension/src/domains.test.ts, status.test.ts: Airbnb sites and the popup's status line.

CI runs lint, typecheck, tests, a build, and Mozilla's add-on linter on every pull request.

This documentation

Pages are Markdown in docs/, plus RELEASING.md and PRIVACY.md from the repository root. npm run docs renders them with the site template and styles in scripts/build-docs.ts and docs/assets/site.css.

  • Link to other pages by their Markdown file ([Install](install.md)); links to other repository files become links to GitHub. The build fails on a link to a missing file or heading.
  • Placeholders such as {{tiers}}, {{curves}} and {{cities}} are filled from the code, so numbers in the docs always match the extension. The full list is at the top of build-docs.ts.

The website

npm run site builds the product website into dist/web: the landing page, an interactive explanation of the score, the privacy policy, and these docs under /docs. The interactive examples bundle the extension's own scoring code (core/trustScore.ts), so they always match it. Vercel builds and serves it as configured in vercel.json: clean URLs (/how-it-works) and security headers. It needs no environment variables.

To preview it locally, build it and serve dist/web with any static server, for example npx serve dist/web.