Voorbeeld

Deze drie bestanden vormen een werkende extensie. Ze gebruikt een GitHub-token, toont uw repositories en laat u er een aan de chat koppelen. Kopieer ze naar een map en pas de API en lijst aan voor uw eigen provider. Zie Een extensie bouwen voor manifestvelden en installatie, en Host-API voor alle methoden.

package.json:

{
  "name": "my-repos",
  "version": "1.0.0",
  "private": true,
  "openchamber": {
    "apiVersion": 1,
    "contributes": {
      "panel": { "id": "my-repos", "name": "Repos", "icon": "github", "entry": "panel/index.html" },
      "attach": "panel",
      "integration": {
        "name": "GitHub (token)",
        "description": "Lists your repositories.",
        "token": {
          "apiOrigin": "https://api.github.com",
          "account": { "path": "/user", "name": "login" },
          "scheme": "bearer"
        }
      }
    }
  },
  "dependencies": { "@openchamber/sdk": "^1.24.0" }
}

panel/index.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>html, body { margin: 0; height: 100%; } #root { height: 100%; padding: 12px; box-sizing: border-box; }</style>
  </head>
  <body>
    <div id="root"></div>
    <script src="main.js"></script>
  </body>
</html>

panel/main.ts:

import { connectHost, HostRequestError } from "@openchamber/sdk";
import { applyHostReady, mountBanner, mountEmpty, mountList, mountSpinner } from "@openchamber/sdk/ui";

type Repo = { full_name: string; html_url: string; description: string | null };

const host = connectHost();
const root = document.querySelector("#root")!;
let mounted: Array<{ dispose: () => void }> = [];

const clear = () => {
  for (const block of mounted) block.dispose();
  mounted = [];
};

let generation = 0;
const paint = async (connected: boolean) => {
  const currentGeneration = ++generation;
  clear();
  if (!connected) {
    mounted.push(mountEmpty(root, {
      title: "Not connected",
      body: "Paste a GitHub token in Settings → Integrations → GitHub (token).",
    }));
    return;
  }
  const spinner = mountSpinner(root, { label: "Loading repositories" });
  mounted.push(spinner);
  try {
    const result = await host.request({ method: "GET", path: "/user/repos", query: { per_page: "30", sort: "updated" } });
    if (currentGeneration !== generation) return;
    spinner.dispose();
    if (result.status !== 200) {
      mounted.push(mountBanner(root, { tone: "error", title: `GitHub answered ${result.status}` }));
      return;
    }
    const repos = JSON.parse(result.body) as Repo[];
    mounted.push(mountList(root, {
      items: repos.map((repo) => ({ id: repo.full_name, title: repo.full_name, subtitle: repo.description ?? undefined })),
      onSelect: (id) => {
        const repo = repos.find((item) => item.full_name === id);
        if (repo) void host.attach({ providerId: "my-repos", id: repo.full_name, title: repo.full_name, url: repo.html_url });
      },
    }));
  } catch (error) {
    if (currentGeneration !== generation) return;
    spinner.dispose();
    const text = error instanceof HostRequestError ? `${error.code}: ${error.message}` : String(error);
    mounted.push(mountBanner(root, { tone: "error", title: "Request failed", body: text }));
  }
};

host.onReady((ctx) => {
  applyHostReady(ctx, document.documentElement);
});
let previousConnection: string | undefined;
host.onConnection((connection) => {
  const key = JSON.stringify(connection);
  if (key === previousConnection) return;
  previousConnection = key;
  void paint(connection.connected);
});

Commit voor installaties en updates via een Git-URL het gebouwde panel/main.js naast de HTML en het manifest. OpenChamber installeert bij een extensie geen npm-afhankelijkheden en bouwt geen TypeScript. Commit de lockfile, zet node_modules/ in .gitignore en bundel browserafhankelijkheden in de IIFE. Voor een update verhoogt u de versie in het eigen package.json van de extensie, bouwt u opnieuw, commit u en pusht u. Kies daarna Bijwerken bij Instellingen → Extensies. Een URL die op een Git-tag is vastgezet, blijft die tag volgen.

Bouw vanuit de map met bunx openchamber-guest-bundle panel/main.ts panel/main.js en voeg de map toe bij Instellingen → Extensies. Nog zes voorbeelden staan op github.com/openchamber/openchamber/tree/main/packages/sdk/examples: alle UI-onderdelen, een takenlijst met acties en een slash-opdracht, een lokale service, een configuratie-editor, een pakket met alleen toolweergaven en een Werkstatus-onderdeel met een Git-grafiek.