Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.mellowtel.com/llms.txt

Use this file to discover all available pages before exploring further.

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

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

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

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

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

ضبط package.json

حدث package.json تاعك باش تضيف الأذونات المطلوبة:
{
  "manifest": {
    "permissions": [
      "storage",
      "declarativeNetRequest"
    ],
    "host_permissions": ["<all_urls>"]
  }
}

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

أنشئ أو حدث الملف .env تاعك:
PLASMO_PUBLIC_MELLOWTEL=your_mellowtel_api_key_here
تأكد باش تبدل your_mellowtel_api_key_here بالمفتاح الفعلي تاع Mellowtel من لوحة التحكم.

التنفيذ

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

أنشئ أو عدل سكريبت الخلفية (background.ts):
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):
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):
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

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

استعمل هاد الأوامر خلال التطوير:
# بدء خادم التطوير
pnpm dev

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

# حزم التوسعة
pnpm package
  1. دايما جرب التوسعة تاعك بشكل كامل في بيئات التطوير والإنتاج
  2. راقب الكونسول لأي تحذيرات أو أخطاء متعلقة بـ Mellowtel
  3. جرب عملية الاشتراك من منظور المستخدم
  4. تحقق من أن رابط الإعدادات يعمل بشكل صحيح
  5. تأكد من أن جميع الأذونات مضبوطة بشكل صحيح

الاختبار

قبل ما ترسل التوسعة تاعك:
  1. جرب عملية التثبيت
  2. تحقق من أن عملية الاشتراك تعمل
  3. تأكد من أن صفحة الإعدادات قابلة للوصول
  4. أكد أن جميع الأذونات تعمل بشكل صحيح
  5. جرب على متصفحات مختلفة إذا كنت تستهدف منصات متعددة
لمزيد من المعلومات حول ميزات Mellowtel وAPI، زور Quickstart.
تحتاج مساعدة؟ انضم لمجتمعنا على Discord للحصول على الدعم.