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 للمشروع تاعك:
ضبط 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
أفضل الممارسات في التطوير
دايما جرب التوسعة تاعك بشكل كامل في بيئات التطوير والإنتاج
راقب الكونسول لأي تحذيرات أو أخطاء متعلقة بـ Mellowtel
جرب عملية الاشتراك من منظور المستخدم
تحقق من أن رابط الإعدادات يعمل بشكل صحيح
تأكد من أن جميع الأذونات مضبوطة بشكل صحيح
الاختبار
قبل ما ترسل التوسعة تاعك:
جرب عملية التثبيت
تحقق من أن عملية الاشتراك تعمل
تأكد من أن صفحة الإعدادات قابلة للوصول
أكد أن جميع الأذونات تعمل بشكل صحيح
جرب على متصفحات مختلفة إذا كنت تستهدف منصات متعددة
لمزيد من المعلومات حول ميزات Mellowtel وAPI، زور Quickstart .
تحتاج مساعدة؟ انضم لمجتمعنا على Discord للحصول على الدعم.