---
url: https://docs.ogmabox.com/nl/plugins/quickstart.md
description: >-
  Maak en installeer je eerste Ogma-plugin in enkele minuten met een minimaal
  backendvoorbeeld en een optioneel frontendpaneel.
---

# Snel aan de slag met plugins {#plugin-quickstart}

Met deze handleiding ga je snel van een lege map naar een werkende plugin.

## 1) Maak een minimale plugin met alleen een backend {#\_1-create-a-minimal-backend-only-plugin}

Maak een map met deze bestanden:

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

Installeer via **Plug-ins > Installeren**, kies de map, schakel de plugin in en controleer of de logs `Plugin started` tonen.

## 2) Als je TypeScript gebruikt {#\_2-if-you-are-using-typescript}

Gebruik deze structuur:

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

Bundel met:

```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
```

Installeer de map vervolgens zoals hierboven beschreven.

## 3) Voeg later een frontend toe {#\_3-add-a-frontend-later}

Voeg alleen een frontendvermelding en interfacebestanden toe wanneer je een paneel nodig hebt:

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

Breid vervolgens `manifest.json` uit met:

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

Gebruik voor frontendcommunicatie `window.ogmaSDK.ready(...)` en houd backendaanroepen in `sdk.api`-handlers.

## 4) Machtigingen die je bijna altijd nodig hebt {#\_4-permissions-you-almost-always-need}

Voor het backendvoorbeeld hierboven:

* geen (veilige standaardmachtigingen worden automatisch verleend)

Als je plugin uitgaande verzoeken verstuurt, voeg dan het volgende toe:

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

Als je plugin bevindingen schrijft, voeg dan het volgende toe:

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

Vraag alleen aan wat je daadwerkelijk gebruikt.

## Problemen met je eerste plugin oplossen {#troubleshooting-first-plugin}

* `Plugin failed to initialize` → open **Logboeken** en controleer of `init(sdk)` is gedefinieerd.
* `Invalid manifest` → controleer de komma's en aanhalingstekens in de JSON.
* Er worden geen callbacks uitgevoerd → controleer of de plugin is ingeschakeld en of de bijbehorende gebeurtenis (`onInterceptResponse`) is geregistreerd.

Voor de volledige API-naslagwerken:

* [Pluginsysteem](./README)
* [Backend-SDK](/nl/plugins/backend-sdk)
* [Frontend-SDK](/nl/plugins/frontend-sdk)