Extensions

Extensions (currently an experimental feature) are small programs you can install in Balloon Navigator to add more features or modify how it works to suit you better.

Installing extensions

If your extension is inside .zip file, unpack it first into a folder.

Open Settings ALT + S, go to Extensions tab and click on Upload extension button. Go to the extension folder, select all files and upload them.

After successful installation, enable extension with checkbox and reload the app to apply changes.

Development

Extension is a HTML file included in the app as a sandboxed iframe with allow-scripts. It has access to app data through Channel Messaging Web API.

Being based on iframes, extensions give you great freedom to do everything a web browser allows you to:

• connect to external services
• build dynamic pages
• use Javascript libraries, including frameworks like React, Vue or Svelte
• spawn web workers for heavy asynchronous computation

Whatever you build, just make sure to bundle everything (HTML, JS and CSS) into a single HTML file.

Extensions require manifest.json file with following structure:

{
  "name": "Example Extension", // required
  "description": "An example extension", // optional
  "version": "1.0", // optional
  "panelShortcutKey": "H" // optional
}

Each HTML file is registered to predefined place in the app based on their file names. Currently allowed registrations are:

• map-overlay (map-overlay.html) - it covers the whole map window and it cannot be interacted with (all clicks are passed through to map). Always active.
• panel (panel.html) - dynamic panel which can be moved around and collapsed (similar to Windreader or Selected). When collapsed, iframe is destroyed - use map-overlay if you want something to be always working in background.

This is how extension structure looks like:

/
├── manifest.json
├── map-overlay.html
└── panel.html