플러그인 빠른 시작

이 가이드는 빈 폴더에서 시작해 플러그인을 빠르게 실행하는 과정을 안내합니다.

1) 최소한의 백엔드 전용 플러그인 만들기

다음 파일을 담은 폴더를 만듭니다.

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

manifest.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:

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를 사용하는 경우

다음 구조를 사용합니다.

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

다음 명령으로 번들링합니다.

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) 나중에 프런트엔드 추가하기

패널이 필요할 때만 프런트엔드 항목과 UI 파일을 추가합니다.

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

그런 다음 manifest.json에 다음 항목을 추가합니다.

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

프런트엔드 통신에는 window.ogmaSDK.ready(...)를 사용하고, 백엔드 호출은 sdk.api 핸들러에서 처리합니다.

4) 일반적으로 필요한 권한

위 백엔드 예제의 경우:

• 없음(안전한 기본 권한은 자동으로 부여됨)

플러그인이 외부로 요청을 보내는 경우 다음을 추가합니다.

"permissions": ["send_requests"]

플러그인이 발견 사항을 작성하는 경우 다음을 추가합니다.

"permissions": ["write_findings"]

실제로 사용하는 권한만 요청하세요.

첫 플러그인 문제 해결

• Plugin failed to initialize → 로그를 열고 init(sdk)가 정의되어 있는지 확인합니다.
• Invalid manifest → JSON의 쉼표와 따옴표를 확인합니다.
• 콜백이 실행되지 않음 → 플러그인이 활성화되어 있고 해당 이벤트(onInterceptResponse)가 등록되어 있는지 확인합니다.

전체 API 참조:

• 플러그인 시스템
• 백엔드 SDK
• 프런트엔드 SDK