İçeriğe geç
OpenChamber
↑↓Gezin ↵Aç escKapat

Örnek

Bu üç dosya çalışan bir eklentidir. Bir GitHub token’ı bağlar, depolarınızı listeler ve birini sohbete iliştirmenizi sağlar. Dosyaları bir klasöre kopyalayın, sonra API’yi ve listeyi kendi sağlayıcınıza göre değiştirin. Manifest alanları ve kurulum için Eklenti oluşturma sayfasına, her metot için Host API sayfasına bakın.

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);
});

Git URL üzerinden kurulum ve güncelleme için derlenmiş panel/main.js dosyasını HTML ve manifest ile birlikte commit edin. OpenChamber kurulum sırasında npm bağımlılıklarını yüklemez veya TypeScript derlemez. Lockfile dosyasını commit edin, node_modules/ dizinini .gitignore içine alın ve tarayıcı bağımlılıklarını IIFE içine dahil edin. Güncelleme yayımlamak için eklentinin kendi package.json sürümünü artırın, yeniden derleyin, commit ve push yapın. Settings → Extensions içinde Update seçin. Git etiketine sabitlenmiş bir URL o etikette kalır.

Klasörün içinden bunx openchamber-guest-bundle panel/main.ts panel/main.js ile derleyin, sonra klasörü Ayarlar → Uzantılar içinde ekleyin. Beş örnek daha (her UI denetimi, eylemler ve bir eğik çizgi komutuyla bir görev listesi, yerel bir servis, bir yapılandırma dosyası düzenleyicisi, yalnızca araçlardan oluşan bir paket) github.com/openchamber/openchamber/tree/main/packages/sdk/examples adresinde.