مع تزايد الحاجة للوصول إلى أوقات الصلاة بشكل دقيق وسريع، يبرز مشروع Open-Muezzin كإضافة متصفح مفتوحة المصدر توفر أوقات الصلاة دون تتبع المستخدمين أو عرض إعلانات، وتدعم معظم المتصفحات الرئيسية. في هذا المقال، نستعرض العملية الكاملة لتطوير الإضافة: من اختيار الإطار البرمجي، وحساب أوقات الآذان، إلى تصميم الواجهة، وتفعيل الإشعارات، ودعم اللغات، وصولًا إلى النشر على متاجر المتصفحات.
كانت لي تجربة سابقة في تطوير موقع لعرض أوقات الصلاة Openadhan، والذي يعمل بكفاءة، لكنه يتطلب فتح الموقع يدويًّا لرؤية الأوقات، وهو حل غير عملي في الحياة اليومية. ومن هنا جاءت الفكرة: لماذا لا نُحوّل هذه الوظيفة إلى إضافة متصفح؟ مع ميزة إضافية: تنبيه بصري مباشر بتغيير رمز الإضافة عند اقتراب وقت الصلاة.
إختيار الإطار: Plasmo
تم اختيار Plasmo كإطار لتطوير الإضافة لما يقدمه من مزايا قوية:
- دعم متكامل لإنشاء إضافات Chrome وFirefox باستخدام نفس قاعدة الكود.
- هيكلة واضحة للملفات: popup/، background/، وcontent-scripts/.
- إمكانية التشغيل في الخلفية حتى مع عدم فتح نافذة الإضافة، عبر ملف background.
- تكامل سلس مع React وTypeScript، ما يسهّل بناء واجهات تفاعلية ومرنة.
سمح لي Plasmo ببناء الإضافة بطريقة منظمة وقابلة للتوسعة، مع إمكانية إعادة استخدام المكونات والمنطق في أي تحديث مستقبلي دون جهد كبير.
إعادة استخدام الكود من برنامج OpenAdhan
لأن برنامج OpenAdhan مبني باستعمال ReactJS وبهيكة واضحة تمكنّت من نقل الأجزاء الأساسية بسلاسة، خصوصًا:
- منطق حساب أوقات الصلاة باستخدام مكتبة adhan-js.
- وظيفة تحويل الإحداثيات الجغرافية إلى أسماء المدن (Geocoding) والعكس (Reverse Geocoding).
هذا وفّر لي وقتًا كبيرًا، وضمن لي دقة الحسابات منذ البداية.
برمجة الواجهة الأساسية للإضافة
صمّمت الواجهة لتكون بسيطة وواضحة، مع التركيز على تجربة المستخدم:
- عرض أوقات الصلاة بشكل منظم مع أيقونات تميّز كل صلاة.
- إظهار الموقع الحالي (اسم المدينة) بوضوح.
- دعم التنسيق الزمني 12/24 ساعة حسب تفضيل المستخدم.
بفضل بيئة Plasmo، تم بناء واجهة الـPopup باستخدام React وTailwindCSS، ما منحني مرونة في التصميم مع توافق عالٍ مع معايير الويب الحديثة.
التحديات التي واجهتها:
طلب إذن تحديد الموقع:
واجهة Geolocation API محمية وتتطلب موافقة صريحة من المستخدم. لذا، تم عرض رسالة توضيحية عند أول استخدام، تشرح سبب الحاجة إلى الموقع.
تحويل الإحداثيات إلى أسماء مدن:
بعد البحث، اخترت خدمة Nominatim من OpenStreetMap لكونها مجانية، مفتوحة المصدر، ولا تتطلب مفتاح API.
تخزين البيانات بكفاءة:
لتجنب طلب الموقع مرارًا وتكرارًا ولتقليل الضغط على خدمة Nominatim ،استخدمت مكتبة Zustand لإدارة الحالة، مع تغيير آلية التخزين من localStorage إلى chrome.storage (المتوافقة مع Manifest V3).
تحسين تجربة الانتظار:
أضفت مكونات Skeleton لتوفير انطباع مرئي بالتحميل، بدلًا من شاشة فارغة أثناء جلب البيانات.
برمجة واجهة الخصائص Options
أضفت صفحة إعدادات تسمح للمستخدم بتخصيص تجربته:
- اختيار طريقة حساب أوقات الصلاة (مثل Umm Al-Qura، Muslim World League، وغيرها).
- تفعيل/إلغاء عرض الوقت بصيغة 24 ساعة.
- تحديد الموقع يدويًّا أو تلقائيًّا.
في الحالة اليدوية، يتم استخدام Reverse Geocoding للبحث عن الإحداثيات انطلاقًا من اسم المدينة.
كما طبّقت تقنيات مثل debouncing لتأخير طلبات البحث إلى Nominatim، وتجنب إرسال طلبات متكررة أثناء الكتابة.
أي تغيير في الإعدادات يُحفَظ تلقائيًّا، ويُفعّل فورًا دون الحاجة لإعادة تشغيل الإضافة.
إضافة تنبيه بصري للآذان
لإثراء التجربة، أضفت تنبيهًا بصريًّا ذكيًّا:
يتم تغيير أيقونة الإضافة تلقائيًّا خلال نافذة زمنية تمتد من 15 دقيقة قبل إلى 15 دقيقة بعد كل أذان، مع مؤقّت يُظهر العدّ التنازلي أو التصاعدي.
التحدي التقني:
كيف نُحدّث الأيقونة دون أن يكون المستخدم قد فتح نافذة الإضافة؟
الحل كان عبر ملف background في Plasmo، المدعوم من Manifest V3، حيث استخدمت واجهة chrome.alarms لتشغيل تحديث دقيق كل دقيقة عند اقتراب وقت الصلاة. هذا يضمن تحديث الأيقونة في الوقت الحقيقي، حتى لو كان المتصفح مفتوحًا دون تفاعل مع الإضافة.
الإضافة الأذونات : الشفافية أولًا
من منطلق الالتزام بالخصوصية، طلبَت الإضافة أدنى حد ممكن من الأذونات، فقط ما هو ضروري لآداء الوضائف الأساسية:
"permissions": [
"geolocation",
"storage",
"alarms"
]
- geolocation: لتحديد الموقع تلقائيًّا عند التفعيل الأول (مع توضيح سبب الطلب في الواجهة).
- storage: لحفظ إعدادات المستخدم (كطريقة الحساب والوقت المفضل) بطريقة آمنة عبر chrome.storage.
- alarms: لتحديث أيقونة الإضافة تلقائيًّا قبل وبعد الأذان، حتى عند عدم فتح-popup.
لم تُطلب أي أذونات واسعة مثل tabs أو notifications (لأن التنبيه بصري فقط حاليًّا)، مما عزّز ثقة المُراجِعين في كلا المتجرَين، ونسّق مع التزامنا بـ «لا تتبع، لا إعلانات».
##
لتحقيق تجربة متعددة اللغات دون تعقيد، استخدمت ميزة الترجمة المدمجة في إطار Plasmo، والتي تعتمد على هيكل /_locales/ المتوافق مع معيار Manifest V3.
أُنشِئت مجلّدين: locales/en/ و locales/ar/، يحتوي كل منهما على ملف messages.json يضم جميع النصوص المترجمة.
تم ربط العناصر في الواجهة (مثل العناوين، أسماء الصلوات، إعدادات الوقت) برسائل مرجعية (مثل "prayer_fajr": { "message": "الفجر" }) باستخدام دالة chrome.i18n.getMessage().
النتيجة: واجهة متجاوبة مع لغة المستخدم من اللحظة الأولى، وقابلة للتوسعة بسهولة لإضافة لغات جديدة لاحقا عبر إضافة مجلد locales فقط، دون تعديل في المنطق البرمجي.
إضافة صفحة هبوط لعرض التطبيق
في هذه المرحلة، أدركت أن وجود صفحة هبوط (Landing Page) ضروري للتعريف بالمشروع، خاصة للمستخدمين الجدد أو المطورين المهتمين بالمساهمة.
لذا، أنشأت صفحة بسيطة https://openmuezzin.adelpro.us.kg/ تعرض:
- نظرة عامة على ميزات الإضافة.
- روابط التثبيت من متاجر Chrome وFirefox.
- رابط المستودع المفتوح المصدر على GitHub.
- دعم متعدد اللغات (حاليًّا: العربية والإنجليزية).
تم دمج كود الصفحة في ملف /docs داخل نفس مستودع كود التطبيق لتسهيل التحديثات لاحقا، تم نشرها باستعمال خاصية Github pages وربطها بموقعي باستعمال Cloudflare DNS وهي خدمات مجانية.
نشر الإضافة على كل من Firefox وChrome
نشر الإضافة على المتاجر الرسمية كان خطوة رئيسية لضمان الوصول الواسع:
- Chrome Web Store:
اتبعت إرشادات Google لـ Manifest V3، وركّزت على الخصوصية (لا جمع بيانات، لا تتبع، لا إعلانات). بعد مراجعة استغرقت عدة أيام، تمت الموافقة على الإضافة.
طلب مني تحديد النطاقات التي تتصل بها الإضافة وتم تحديدها في نطاق Nominatom الخاص ب تحديثات الموقع وجلب أسماء المدن
"host_permissions": [
"https://nominatim.openstreetmap.org/*"
],
ملاحظة: فتح حساب مطور في متجر Chrome لتحميل الإضافات يتطلّب دفع 5 دولارات لمرة واحدة (ليست رسومًا دورية).
- Firefox Add-ons:
عملية المراجعة كانت أسرع وأكثر شفافية. الميزة هنا أن Firefox لا يزال يدعم بعض ميزات Manifest V2، لكنني التزمت بـ V3 لضمان التوافق المستقبلي.
Firefox أكثر تشددا في ما يتعلق بالخصوصية، وجب علي إضافة هذه الفقرة للتوافق مع شروط النشر
"browser_specific_settings": {
"gecko": {
"id": "open-muezzin@adelpro.us",
"strict_min_version": "140.0",
"data_collection_permissions": {
"required": [
"none"
]
}
}
}
ملاحظة: فتح حساب مطور في متجر Firefox لتحميل الإضافات مجاني تماما.
الخلاصة
مشروع Open-Muezzin هو مثال عملي على كيف يمكن للمشاريع مفتوحة المصدر أن تُقدّم حلولًا مفيدة، محترمة للخصوصية، وسهلة الاستخدام.
من خلال الجمع بين أدوات حديثة مثل Plasmo، React، وTypeScript، مع مكتبات موثوقة مثل adhan-js وخدمات مثل Nominatim، تمكّنت من تحويل فكرة بسيطة "التذكير بأوقات الصلاة" إلى أداة يومية يعتمد عليها المستخدمون.
المشروع لا يزال في تطوّر مستمر، وأتطلّع إلى دعم لغات إضافية.
المشروع مفتوح المصدر ويمكنك المساهمة أو تحميله من: https://github.com/adelpro/Open-Muezzin
