Extensions

Extensions are the tile content of a GM screen. Every tile displays one extension: whether it’s a dice roller, character sheet, initiative tracker, or a anything else you can imagine. Extensions are composed of HTML, CSS, JavaScript, and any other modern web technology.

Under-the-hood, extensions are iframe that are injected with the Overseer SDK. Each extension has full access to the Overseer SDK methods. Anything you can build for the web, you can build for Overseer. You can even load a website and inject it with your own JavaScript to create incredibly rich and robust extensions not otherwise possible.

Creating an extension

You can create an extension by creating a definition in the plugin manifest.json file.

Example:

{
  // [...]
  "extensions": [
    { "$ref": "extensions/my-extension/manifest.json" }
  ]
}

Extension definition

Similar to plugins, an extension is defined by a manifest.json file.

Reference

Please reference https://overseer.studio/schemas/extension/manifest.json for a complete definition of the file.

Custom extensions

Extensions can load custom HTML, CSS, JavaScript, and any other modern web technology.

To create a custom extension, create a extensions/my-extension/manifest.json file.

{
  "id": "@my-name/my-extension",
  "author": "My Name <name@example.com>",
  "category": "",
  "config": {},
  "description": "My first extension",
  "icon": { "$ref": "assets/icon.png" },
  "label": "My Extension",
  "source": { "$ref": "dist/index.html" },
  "transparent": true,
  "version": "1.0.0",
}

If you created a plugin with the Overseer SDK, then an extension should already be created for you. Otherwise, ensure that assets/icon.png and dist/index.html exist.

How to create an extension

You are free to use any framework or no framework at all so there is no one-size-fits-all tutorial to build extensions for Overseer. If you like React, use React. If you prefer Vue, use Vue. Use IndexedDB, localStorage, WebWorker, or literally any other modern web technology. Your options are limitless.

The default npx overser init template uses vite to compile and build files into a clean plugin you can eventually distribute.

Website extensions

Load websites and inject custom JavaScript to connect other extensions.