> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# دمج Mellowtel في توسعة Plasmo تاعك

> دليل سريع على كيفية دمج Mellowtel في توسعة المتصفح Plasmo تاعك

هنا راك تتعلم كيفاش تقدر تربح من توسعة المتصفح Plasmo تاعك بدمج Mellowtel.
الوقت المقدر للإكمال: 5-15 دقيقة.

# التثبيت اليدوي

إذا كان عندك مشروع Plasmo موجود، اتبع هاد الخطوات باش تضيف دمج Mellowtel.

### تثبيت التبعيات

أول حاجة، زيد حزمة Mellowtel للمشروع تاعك:

```bash theme={null}
pnpm add mellowtel
```

### ضبط package.json

حدث `package.json` تاعك باش تضيف الأذونات المطلوبة:

```json theme={null}
{
  "manifest": {
    "permissions": [
      "storage",
      "declarativeNetRequest"
    ],
    "host_permissions": ["<all_urls>"]
  }
}
```

### ضبط المتغيرات البيئية

أنشئ أو حدث ملف `.env` تاعك:

```plaintext theme={null}
PLASMO_PUBLIC_MELLOWTEL=your_mellowtel_api_key_here
```

<Warning>
  تأكد بلي تبدل `your_mellowtel_api_key_here` بالمفتاح الحقيقي تاع Mellowtel من لوحة التحكم.
</Warning>

# التنفيذ

### إعداد السكريبت الخلفي

أنشئ أو عدل السكريبت الخلفي تاعك (`background.ts`):

```typescript theme={null}
import Mellowtel from "mellowtel"

let mellowtel;

(async () => {
  mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
  await mellowtel.initBackground()
})()

// التعامل مع التثبيت والتحديثات
chrome.runtime.onInstalled.addListener(async function (details) {
  console.log("التوسعة تثبتت أو تحدثت", details)
  await mellowtel.generateAndOpenOptInLink()
})
```

### إعداد سكريبت المحتوى

أنشئ أو عدل سكريبت المحتوى تاعك (`content.ts`):

```typescript theme={null}
import Mellowtel from "mellowtel"
import type { PlasmoCSConfig } from "plasmo"

let mellowtel;

// ضبط سلوك سكريبت المحتوى
export const config: PlasmoCSConfig = {
  matches: ["<all_urls>"],
  all_frames: true,
  run_at: "document_start"
}

const start = async () => {
  mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
  const resp = await mellowtel.initContentScript()
}

start()
```

### تنفيذ النافذة المنبثقة

أنشئ أو عدل مكون النافذة المنبثقة تاعك (`popup.tsx`):

```typescript theme={null}
import Mellowtel from "mellowtel"

const Popup: React.FC = () => {
  const handleMellowtelSettings = async () => {
    const mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
    const link = await mellowtel.generateSettingsLink()
    chrome.tabs.create({ url: link })
  }

  return (
    <div>
      <button onClick={handleMellowtelSettings}>
        تغيير إعدادات Mellowtel
      </button>
    </div>
  )
}

export default Popup
```

# أوامر التطوير

استعمل هاد الأوامر أثناء التطوير:

```bash theme={null}
# بدء خادم التطوير
pnpm dev

# البناء للإنتاج
pnpm build

# حزم التوسعة
pnpm package
```

<Accordion title="أفضل ممارسات التطوير">
  1. ديما جرب التوسعة تاعك بشكل كامل في بيئات التطوير والإنتاج
  2. راقب الكونسول لأي تحذيرات أو أخطاء متعلقة بـ Mellowtel
  3. جرب عملية الاشتراك من منظور المستخدم
  4. تأكد بلي رابط الإعدادات يخدم بشكل صحيح
  5. تأكد بلي جميع الأذونات مضبوطة بشكل صحيح
</Accordion>

# الاختبار

قبل ما ترسل التوسعة تاعك:

1. جرب عملية التثبيت
2. تحقق من أن عملية الاشتراك تخدم
3. تأكد بلي صفحة الإعدادات قابلة للوصول
4. تأكد بلي جميع الأذونات تخدم بشكل صحيح
5. جرب على متصفحات مختلفة إذا كنت تستهدف منصات متعددة

<Note>
  لمزيد من المعلومات حول ميزات Mellowtel وAPI، زور [البدء السريع](https://docs.mellowtel.com/browser-plugins/quickstart).
</Note>

تحتاج مساعدة؟ انضم لمجتمعنا على [Discord](https://discord.com/invite/txAZp4MSDe) للحصول على الدعم.