Skip to main content

Creating an extension

Registering an extension​

Public self-serve registration is not available yet. To ship an extension, share your source code with the Kittl team for review and registration.

Dev Sandbox​

Your extension is loaded as a sandboxed frame. At minimum, you need:

  • a manifest file
  • an HTML entrypoint referenced by the manifest
  • JavaScript/TypeScript code that loads the SDK and registers kittl.onReady

Extension directory structure​

Manifest​

Every extension is made up of a manifest and source files. See the full manifest schema in Extension manifest.

Example:

my-extension/
  manifest.json
  index.html
  src/
    main.ts
  assets/
    icon.svg

HTML frame entrypoint​

Your frames.navPanel.path should point to the extension HTML file:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Extension</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>

Bootstrapping the SDK​

import { kittl } from '@kittl/sdk';

kittl.onReady(async () => {
  const selected = await kittl.state.getSelectedObjectsIds();
  console.log('Selected layers:', selected);
});

Authentication support​

If your extension needs OAuth, define providers in oauthProviders and use kittl.auth. See Authentication.