---
url: https://docs.ogmabox.com/de/plugins/quickstart.md
description: >-
  Erstellen und installieren Sie Ihr erstes Ogma-Plugin in wenigen Minuten mit
  einem minimalen Backend-Beispiel und einem optionalen Frontend-Panel.
---

# Plugin-Schnellstart {#plugin-quickstart}

Diese Anleitung führt Sie schnell vom leeren Ordner zum laufenden Plugin.

## 1) Ein minimales Plugin nur mit Backend erstellen {#\_1-create-a-minimal-backend-only-plugin}

Erstellen Sie einen Ordner mit diesen Dateien:

```text
my-plugin/
  manifest.json
  backend/
    script.js
```

`manifest.json`:

```json
{
  "id": "my-plugin",
  "name": "My Plugin",
  "version": "0.1.0",
  "plugins": [
    {
      "kind": "backend",
      "id": "my-plugin-backend",
      "entrypoint": "backend/script.js"
    }
  ]
}
```

`backend/script.js`:

```js
async function init(sdk) {
  sdk.console.log("Plugin started");

  sdk.events.onInterceptResponse(function(req, res) {
    if (!res) return;
    if (res.getCode() === 403) {
      sdk.console.warn("403 on " + req.getUrl());
    }
  });
}
```

Installieren Sie das Plugin über **Plugins > Installieren**, wählen Sie den Ordner aus, aktivieren Sie das Plugin und prüfen Sie, ob `Plugin started` in den Protokollen erscheint.

## 2) Wenn Sie TypeScript verwenden {#\_2-if-you-are-using-typescript}

Verwenden Sie diese Struktur:

```text
my-plugin/
  manifest.json
  backend/
    src/index.ts
```

Erstellen Sie das Bundle mit:

```bash
pnpm add -D @ogmabox/ogma-sdk esbuild typescript
pnpm exec esbuild backend/src/index.ts \
  --bundle \
  --platform=neutral \
  --format=iife \
  --external:@ogma/sdk --external:@ogmabox/ogma-sdk \
  --outfile=backend/script.js
```

Installieren Sie anschließend den Ordner wie oben beschrieben.

## 3) Später ein Frontend hinzufügen {#\_3-add-a-frontend-later}

Fügen Sie einen Frontend-Eintrag und UI-Dateien erst hinzu, wenn Sie ein Panel benötigen:

```text
my-plugin/
  frontend/
    script.js
    style.css   # optional
```

Erweitern Sie dann `manifest.json` um:

```json
{
  "kind": "frontend",
  "id": "my-plugin-frontend",
  "entrypoint": "frontend/script.js",
  "backend": { "id": "my-plugin-backend" }
}
```

Verwenden Sie für die Frontend-Kommunikation `window.ogmaSDK.ready(...)` und führen Sie Backend-Aufrufe in `sdk.api`-Handlern aus.

## 4) Berechtigungen, die Sie fast immer benötigen {#\_4-permissions-you-almost-always-need}

Für das obige Backend-Beispiel:

* keine (sichere Standardberechtigungen werden automatisch erteilt)

Wenn Ihr Plugin ausgehende Anfragen sendet, fügen Sie Folgendes hinzu:

```json
"permissions": ["send_requests"]
```

Wenn Ihr Plugin Befunde schreibt, fügen Sie Folgendes hinzu:

```json
"permissions": ["write_findings"]
```

Fordern Sie nur Berechtigungen an, die Sie tatsächlich verwenden.

## Problemlösung beim ersten Plugin {#troubleshooting-first-plugin}

* `Plugin failed to initialize` → öffnen Sie **Protokolle** und prüfen Sie, ob `init(sdk)` definiert ist.
* `Invalid manifest` → prüfen Sie Kommas und Anführungszeichen im JSON.
* Keine Callbacks werden ausgelöst → prüfen Sie, ob das Plugin aktiviert ist und das passende Ereignis (`onInterceptResponse`) registriert wurde.

Vollständige API-Referenzen:

* [Plugin-System](./README)
* [Backend-SDK](/de/plugins/backend-sdk)
* [Frontend-SDK](/de/plugins/frontend-sdk)