foxglove-string-panel

demo.webm

Foxglove allows developers to create extensions, or custom code that is loaded and executed inside the Foxglove application. This can be used to add custom panels. Extensions are authored in TypeScript using the @foxglove/extension SDK.

Develop

Extension development uses the npm package manager to install development dependencies and run build scripts.

To install extension dependencies, run npm from the root of the extension package.

npm install

To build and install the extension into your local Foxglove desktop app, run:

npm run local-install

Open the Foxglove desktop (or ctrl-R to refresh if it is already open). Your extension is installed and available within the app.

Package

Extensions are packaged into .foxe files. These files contain the metadata (package.json) and the build code for the extension.

Before packaging, make sure to set name, publisher, version, and description fields in package.json. When ready to distribute the extension, run:

npm run package

This command will package the extension into a .foxe file in the local directory.

Publish

You can publish the extension to the public registry or privately for your organization.

See documentation here: https://docs.foxglove.dev/docs/visualization/extensions/publish/#packaging-your-extension