Skip to main content
هاد الدليل يشرح كيفاش تدمج Mellowtel في الإضافة ديالك للمتصفح بلا ما تستعمل bundlers بحال Webpack ولا Vite. بلاصة، غادي تستعمل ملف واحد مجمع مسبقًا اللي كيخدم في كل من content scripts وservice workers.

إعداد المشروع

بدا بهيكل أساسي للإضافة ديالك للمتصفح:

الحصول على حزمة Mellowtel

عندك جوج اختيارات باش تحصل على ملف mellowtel.js للإضافة ديالك:

الخيار 1: استعمال ملف مجمع مسبقًا

أسهل طريقة باش تبدا هي تستعمل الملف المجمع مسبقًا mellowtel.js من المستودع mellowtel-bundled.
  1. سير للمستودع mellowtel-bundled
  2. حمل ملف mellowtel.js
  3. نسخو فالدليل ديال الإضافة ديالك

الخيار 2: إنشاء الحزمة الخاصة بك

إلا كنتي تفضل تنشئ الحزمة بنفسك، تابع هاد الخطوات:

إنشاء دليل مؤقت للتجميع

أنشئ دليل مؤقت باش تثبت Mellowtel وتجمع الحزمة:
هاد الشي كينشئ مجلد منفصل مع حزمة Mellowtel اللي غادي تستعملها غير للتجميع.

تجميع Mellowtel مع esbuild

من داخل دليل mellowtel-bundling، أنشئ حزمة وحدة اللي كتخدم في كل من service workers وcontent scripts:
هاد الأمر:
  • كيأخذ المصدر ديال Mellowtel من node_modules/mellowtel/dist/index.js
  • كيجمع جميع التبعيات في ملف واحد
  • كيستعمل صيغة IIFE مع اسم عالمي للتوافق العالمي
  • كيضيف تذييل باش يكون التصدير الافتراضي متاح عالميًا
  • كيحسن البيئة ديال المتصفح وكيصغر المخرج
  • كيخلق mellowtel.js فالدليل ديال التجميع

نسخ الحزمة للإضافة ديالك

من بعد ما تشغل الأمر ديال esbuild، نسخ الملف اللي تم إنشاؤه للدليل ديال الإضافة ديالك:
دابا تقدر تحذف الدليل المؤقت ديال التجميع حيث غير كنت محتاج الملف المخرج:
الدليل ديال الإضافة ديالك دابا كيحتوي على ملف Mellowtel المجمع وجاهز للاستعمال.

تكوين الملف التعريفي ديالك (جوج الخيارات)

بغض النظر على الخيار اللي اخترتيه فوق، كينظم الملف التعريفي manifest.json باش يتضمن حزمة Mellowtel في content scripts:
مهم:
  • الحقل "type": "module" كيخلي استيراد وحدات ES في الخدمة ديالك.
  • فالمصفوفة ديال content scripts، خاص mellowtel.js يتشحن قبل content_script.js باش يكون المتغير العالمي ديال Mellowtel متاح ملي كيتشغل السكريبت ديالك.

استعمال Mellowtel في الإضافة ديالك

بالنسبة للخدمة ديالك (background.js)، استورد الملف المجمع:
بالنسبة للسكريبتات ديال المحتوى، Mellowtel متاح كمتغير عالمي (ما كاينش حاجة للاستيراد، حيث كيتشحن عبر الملف التعريفي):

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

باش تختبر الإضافة ديالك:
  1. سير لـ chrome://extensions/ فـ Chrome (ولا ما يعادلها فمتصفحات أخرى)
  2. فعل “وضع المطور”
  3. كليك على “تحميل غير معبأ” واختار الدليل ديال الإضافة ديالك
هاد النهج كيمنحك الفوائد ديال استعمال Mellowtel بلا تعقيد إعداد نظام بناء كامل بحال Webpack ولا Vite.