---
url: https://docs.ogmabox.com/ja/plugins/quickstart.md
description: 最小構成のバックエンドの例と任意のフロントエンドパネルを使い、最初の Ogma プラグインを数分で作成してインストールします。
---

# プラグインクイックスタート {#plugin-quickstart}

このガイドでは、空のフォルダーから動作するプラグインをすばやく作成します。

## 1) 最小構成のバックエンド専用プラグインを作成 {#\_1-create-a-minimal-backend-only-plugin}

次のファイルを含むフォルダーを作成します。

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

**プラグイン > インストール**でフォルダーを選択し、プラグインを有効にして、ログに `Plugin started` が表示されることを確認します。

## 2) TypeScript を使用する場合 {#\_2-if-you-are-using-typescript}

次の構成を使用します。

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

次のコマンドでバンドルします。

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

その後、前述の手順でフォルダーをインストールします。

## 3) フロントエンドは後から追加 {#\_3-add-a-frontend-later}

パネルが必要になった時点で、フロントエンドのエントリと UI ファイルを追加します。

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

次に、`manifest.json` に以下を追加します。

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

フロントエンドとの通信には `window.ogmaSDK.ready(...)` を使用し、バックエンド呼び出しは `sdk.api` ハンドラー内に置いてください。

## 4) 通常必要となる権限 {#\_4-permissions-you-almost-always-need}

上記のバックエンドの例では：

* 追加の権限は不要です（安全な既定の権限は自動付与されます）

プラグインが外部へリクエストを送信する場合は、次を追加します。

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

プラグインが指摘事項を書き込む場合は、次を追加します。

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

実際に使用する権限のみを要求してください。

## 最初のプラグインのトラブルシューティング {#troubleshooting-first-plugin}

* `Plugin failed to initialize` → **ログ**を開き、`init(sdk)` が定義されていることを確認します。
* `Invalid manifest` → JSON のカンマと引用符を確認します。
* コールバックが呼ばれない → プラグインが有効で、対応するイベント（`onInterceptResponse`）が登録されていることを確認します。

完全な API リファレンス：

* [プラグインシステム](./README)
* [バックエンド SDK](/ja/plugins/backend-sdk)
* [フロントエンド SDK](/ja/plugins/frontend-sdk)