Development

Project structure

The source project contains tabs-extension.json, src/main.tsx, styles, Vite/TypeScript configuration, README, and a local staging script. React builds into .tabs-extension/dist; the staging script copies only the manifest and README beside those assets.

The manifest entry dist/index.html is relative to the packaged root, not the source project. Vite uses a relative asset base. Do not package node_modules, .env files, npm installation scripts, native binaries, or remote executable scripts. Listing README rendering escapes raw HTML, accepts HTTP/HTTPS/mailto links, and displays only the declared packaged raster icon; arbitrary remote images and undeclared screenshots are removed.

Watch and reload

Run npm run build first, then tabsext dev to watch local built assets. This is build watching, not remote HMR. Reload the development tool using the host control after a build. Changes to manifest identity or permissions require re-importing and reviewing the extension.

Plain HTML

Use tabsext init my-tool --template html --tabs-version 1.3.17 for the static alternative. Substitute the desktop testing version from your bundle’s release.json if different. Edit files in ui/; npm run build stages them. No React or SDK npm installation is required for JavaScript UI.

Sandbox and debugging

The desktop hosts packaged files through its own protocol in an isolated view. Node, direct networking, popups, and arbitrary navigation are unavailable. Project/profile URL parameters are display context, never authorization. Debug using your own development build, not production user credentials. Test with keyboard navigation, both themes, narrow windows, denied grants, and project switching.