TOFfe Dev Tools 🧡

A developer, designer & security panel for any running Mendix app — no Studio Pro, no source access.

Browser extension by The Orange Force. It injects a panel into a running, deployed Mendix app and shows you the model, the data, the traffic, the design and the security posture — built entirely from what the Mendix client already exposes, and always within the logged-in user's rights (the runtime enforces its rules; that is exactly what you test).

Mendix 10/11 React client (classic Dojo: traffic capture only). Bilingual (EN default, NL in ⚙). Open it via the floating orb, the extension popup, or a shortcut (default Alt+Shift+T); jump anywhere with the command palette (Alt+Shift+P).

What it does

• Overview — a one-screen app review: session, domain model, Web Vitals, traffic + errors, accessibility and access. Attention points, an HTML report and a support-bundle JSON.
• Data — one entity, five lenses: Schema, Records (query & edit with your rights), Graph (instance explorer), Access (the read/create rights matrix per role), and State (live client memory + uncommitted-changes inspector).
• Security — surfaces common Mendix configuration mistakes a developer can fix, each mapped to a public standard (OWASP · OWASP Low-Code · the S-Unit Top 10): over-broad entity access, unused-but-readable attributes, secrets in client constants or browser storage, sensitive fields on published services, exposed service docs, an end-of-life runtime, missing headers, and more. Observed as your session, same-origin and read-only. (It reports what your configuration allows — it does not break anything. Not a full audit.)
• Microflows & Pages — run microflows (entity + primitive params), a test console with object-diff & history, open pages.
• Network & console — decoded XAS traffic, per-operation totals, a timeline, Web Vitals, N+1 & error diagnostics, request replay, and the console.
• API — discover and try published REST / OData / SOAP services.
• Design — accessibility audit + client-ready report, page-wide contrast scan, design-token hygiene, CSS source locations (file:line), inline-style detection 🚔, HTML viewer, freeze tool 🧊, colour-blindness simulation, tab-order and a live theme playground.

The panel docks bottom/right, or ⧉ moves to its own window (app on one screen, tools on the other). Reads and writes go through the runtime; destructive actions confirm first.

Use it on your own apps, and use it responsibly.

Trust & security

For whoever approves installing this at a client — about the normal (Web Store) build:

• Runs locally in your browser. No telemetry, no analytics, zero external calls. Outbound requests target the Mendix app's own origin only, on explicit user action.
• Sees only what the Mendix client already exposes to the logged-in user. Server-side security always applies. Writes are off by default and confirm-gated.
• Permissions: scripting + storage (a few UI prefs) + activeTab + host access. No debugger, tabs, cookies.
• Two runtime libraries (preact, MIT) + axe-core (MPL-2.0, on demand).

There is a separate, sideloaded Advanced build (never in the Web Store) that adds the Chrome debugger tooling and — for authorized security testing of your own apps — active confirmation tests, behind a per-target authorisation you sign and a local audit log. The offensive code is compiled out of the normal build entirely.

Full statement: SECURITY.md · inventory: THIRD-PARTY.md · SBOM: sbom.cdx.json · license: LICENSE (proprietary, The Orange Force).

Install

npm install && npm run build      # → dist/

Chrome → chrome://extensions → Developer mode → Load unpacked → pick dist/. npm run release → zips for colleagues (Chrome + Firefox). npm run build:advanced → the sideloaded Advanced build (dist-advanced/, debugger + active tests).

Chrome Web Store (submitted, pending review)

Public CWS publication (lead's call 2026-08-18, supersedes the earlier unlisted plan) prepared in store/: listing texts + permission justifications (store/LISTING.md), runbook (store/PUBLISH.md), privacy policy. Extension id pinned via manifest key (endcpckmhcpgbedeeknpgfeobnfajkgg) — unpacked and store version share storage. Private key (store/*.pem, gitignored) belongs in the team vault.

Firefox (140+)

Distributed via the public AMO listing (listed channel): install from the add-on's page on addons.mozilla.org; AMO hosts the file and serves updates automatically. The release workflow submits each tagged version (scripts/sign-firefox.mjs, fire-and-forget; needs the AMO_JWT_ISSUER/AMO_JWT_SECRET repo secrets) and AMO publishes it after review. Manifest is patched per build (event-page background, gecko id chromestore@theorangeforce.com; via scripts/firefox-manifest.mjs). Runbook: store/AMO.md.

Legacy: v0.113.0 was self-distributed as a signed .xpi with an updates.json feed on main — that feed stays frozen at 0.113.0; reinstall from the AMO page to get back on auto-updates. Dev/test: the release's …-firefox.zip (unsigned) still loads via about:debugging → Load Temporary Add-on… (gone after restart).

Host permissions are opt-in — grant on first use, then reload the page.

Develop

npm run dev                       # vite build --watch → dist/
npm test                          # data-layer tests (repo-safe fixture)
npm run smoke                     # jsdom UI suites (needs a fresh build)
npm run verify                    # the release gate: typecheck + lint + build + smoke + tests

Per milestone: tsc --noEmit + build clean, all suites green. CI runs the same on every push (ci.yml). Conventions: CLAUDE.md; engineering log per version: DEV-NOTES.md. Releases: pushing a v* tag builds the zips and cumulative notes (see releases).

Credits

Built by Chendo de Langen at The Orange Force, paired with Claude (Anthropic).