إعداد المشروع
بدا بهيكل أساسي للإضافة ديالك للمتصفح:الحصول على حزمة Mellowtel
عندك جوج اختيارات باش تحصل على ملفmellowtel.js للإضافة ديالك:
الخيار 1: استعمال ملف مجمع مسبقًا
أسهل طريقة باش تبدا هي تستعمل الملف المجمع مسبقًاmellowtel.js من المستودع mellowtel-bundled.
- سير للمستودع mellowtel-bundled
- حمل ملف
mellowtel.js - نسخو فالدليل ديال الإضافة ديالك
الخيار 2: إنشاء الحزمة الخاصة بك
إلا كنتي تفضل تنشئ الحزمة بنفسك، تابع هاد الخطوات:إنشاء دليل مؤقت للتجميع
أنشئ دليل مؤقت باش تثبت Mellowtel وتجمع الحزمة:تجميع Mellowtel مع esbuild
من داخل دليلmellowtel-bundling، أنشئ حزمة وحدة اللي كتخدم في كل من service workers وcontent scripts:
- كيأخذ المصدر ديال Mellowtel من
node_modules/mellowtel/dist/index.js - كيجمع جميع التبعيات في ملف واحد
- كيستعمل صيغة IIFE مع اسم عالمي للتوافق العالمي
- كيضيف تذييل باش يكون التصدير الافتراضي متاح عالميًا
- كيحسن البيئة ديال المتصفح وكيصغر المخرج
- كيخلق
mellowtel.jsفالدليل ديال التجميع
نسخ الحزمة للإضافة ديالك
من بعد ما تشغل الأمر ديال esbuild، نسخ الملف اللي تم إنشاؤه للدليل ديال الإضافة ديالك:تكوين الملف التعريفي ديالك (جوج الخيارات)
بغض النظر على الخيار اللي اخترتيه فوق، كينظم الملف التعريفيmanifest.json باش يتضمن حزمة Mellowtel في content scripts:
- الحقل
"type": "module"كيخلي استيراد وحدات ES في الخدمة ديالك. - فالمصفوفة ديال content scripts، خاص
mellowtel.jsيتشحن قبلcontent_script.jsباش يكون المتغير العالمي ديال Mellowtel متاح ملي كيتشغل السكريبت ديالك.
استعمال Mellowtel في الإضافة ديالك
بالنسبة للخدمة ديالك (background.js)، استورد الملف المجمع:اختبار الإضافة ديالك
باش تختبر الإضافة ديالك:- سير لـ
chrome://extensions/فـ Chrome (ولا ما يعادلها فمتصفحات أخرى) - فعل “وضع المطور”
- كليك على “تحميل غير معبأ” واختار الدليل ديال الإضافة ديالك