---
url: https://docs.ogmabox.com/th/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 แบ็กเอนด์](/th/plugins/backend-sdk)
* [SDK ฟรอนต์เอนด์](/th/plugins/frontend-sdk)