عملت في الفترة السابقة على نشر نسخة لمتصفح فايرفوكس من إضافة الورد اليومي التي نشرت عنها قبل أيام في هذا الموضوع حيث شاركت تجربتي في نشر إضافة لمتصفح غوغل كروم، وبعد مروري بهذه التجربة، أردت مشاركة أهم نقاط الاختلاف بين النشر على كروم وفايرفوكس عسى ينفع هذا مستقبلاً من يخطط للنشر على المنصّتين.
تبدأ الاختلافات بين المنصّتين بالظهور من النقطة الأولى: ملف المانيفيست الذي يتم تعريف تفاصيل الإضافة فيه:
1. الفروقات في ملف manifest.json
العمل في الخلفية
كروم يستخدم service_worker:
"background": {
"service_worker": "src/background/background.js",
"type": "module"
}
فايرفوكس يستخدم مصفوفة من ال scripts:
"background": {
"scripts": [
"src/lib/browser-polyfill.js",
"src/background/background.js"
],
"type": "module"
}
سبب استخدامنا لل scripts في فايرفوكس هو عدم دعمه لل service_worker بالكامل، لذا نستخدم scripts بدلاً منه. كما نقوم بتحميل browser-polyfill.js أولاً لتوفير التوافق مع واجهة browser.* وهذا ما سنمرّ عليه مرة أخرى في نقطة لاحقة ونشرح السبب.
إعدادات خاصة بالمتصفح
فايرفوكس يتطلب قسم browser_specific_settings:
"browser_specific_settings": {
"gecko": {
"id": "wird-reminder@hadealahmad.com",
"strict_min_version": "142.0",
"data_collection_permissions": {
"required": ["none"]
}
}
}
في حالة إضافة الورد اليومي لم يكن هناك بيانات مجموعة، لكن يجب عليك تصريح ما يتم جمعه من بيانات بحسب معايير فايرفوكس هنا لو كنت ستجمع بيانات من المستخدمين، عليك أيضاً أن تنتبه لأحدث المعايير الموجودة، فأنا وقعت في خطأ النظر في مقالات قديمة، ومن ثم اكتشفت أنّ فايرفوكس حدّثت هذا وأصبحت بعض الأمور الجديدة مطلوبة في الملف.
id: معرف فريد للإضافة (مطلوب لفايرفوكس)strict_min_version: أدنى إصدار مدعوم من فايرفوكسdata_collection_permissions: إعلان عدم جمع البيانات في حالة إضافة مذكّر الورد اليوميّ
كروم لا يحتاج هذا القسم.
2. الفروقات في الكود
استبدال chrome بـ browser
هذا ما ذكرته في وقت سابق بالاختلافات في المانيفيست والحاجة لاستخدام polyfill في فايرفوكس.
كروم يستخدم كائن chrome:
chrome.storage.local.get('user_reminders');
chrome.runtime.getURL('src/data/presets.json');
chrome.tabs.create({ url });
chrome.alarms.create('reminder_id', { when: time });
بينما فايرفوكس يستخدم كائن browser:
browser.storage.local.get('user_reminders');
browser.runtime.getURL('src/data/presets.json');
browser.tabs.create({ url });
browser.alarms.create('reminder_id', { when: time });
الإشعارات (Notifications)
كروم يدعم الأزرار في الإشعارات:
const notificationOptions = {
type: 'basic',
iconUrl: chrome.runtime.getURL('src/assets/icons/icon128.png'),
title: 'مُذكِّر الوِرد اليومي',
message: 'حان وقت وردك اليومي!',
priority: 2,
requireInteraction: true,
buttons: [{ title: 'اقرأ الآن' }]
};
// الاستماع لنقر الزر
chrome.notifications.onButtonClicked.addListener(async (notificationId, buttonIndex) => {
if (buttonIndex === 0) {
// فتح القارئ
}
});
فايرفوكس لا يدعم buttons وrequireInteraction:
const notificationOptions = {
type: 'basic',
iconUrl: browser.runtime.getURL('src/assets/icons/icon128.png'),
title: 'مُذكِّر الوِرد اليومي',
message: 'حان وقت وردك اليومي!'
};
// الاستماع لنقر الإشعار نفسه (وليس زر)
browser.notifications.onClicked.addListener(async (notificationId) => {
// فتح القارئ
browser.notifications.clear(notificationId);
});
في فايرفوكس لا نستخدم onButtonClicked كونه غير مدعوم، استخدم onClicked بدلاً منه
عدم استخدام innerHTML (فايرفوكس)
كروم يسمح باستخدام innerHTML:
myRemindersList.innerHTML = `
<div class="empty-state">
<div class="empty-state-icon">📖</div>
<p class="empty-state-text">لا توجد تذكيرات نشطة حالياً.</p>
</div>`;
فايرفوكس يتطلب استخدام DOM APIs آمنة وهذا يتم التنبيه عليه قبل النشر:
const emptyDiv = document.createElement('div');
emptyDiv.className = 'empty-state';
const icon = document.createElement('div');
icon.className = 'empty-state-icon';
icon.textContent = '📖';
const text = document.createElement('p');
text.className = 'empty-state-text';
text.textContent = 'لا توجد تذكيرات نشطة حالياً.';
emptyDiv.appendChild(icon);
emptyDiv.appendChild(text);
myRemindersList.appendChild(emptyDiv);
3. ملف browser-polyfill.js
يوجد في firefox/src/lib/browser-polyfill.js وهو ضروري لتوفير التوافق بين واجهات chrome.* وbrowser.*.
يمكنك تحميل أحدث نسخة من webextension-polyfill.
4. عملية النشر
نشر على Chrome Web Store
المتطلبات:
- حساب مطور Google (رسوم لمرة واحدة $5)
- صور ترويجية - الأيقونة تؤخذ من ملفات الإضافة مباشرة
الخطوات:
- ضغط محتويات مجلد
chrome/ في ملف ZIP
- رفع الملف على لوحة تحكم مطوري كروم
- ملء تفاصيل المتجر
- تقديم للمراجعة (1-3 أيام عمل) - في حالة مذكّر الورد اليومي تم النشر في ثلاث أيام بدون مراجعات إضافية، لكن في حال وجود جمع لبيانات المستخدمين أو مشاكل في الإضافة قد يحتاج الأمر مراجعات إضافية للإضافة
شرح الأذونات:
عليك تقديم شرح لكل أذن مطلوب من الإضافة وسبب استخدامه بالتفصيل
نشر على Firefox Add-ons (AMO)
المتطلبات:
- حساب Firefox Add-ons مجانيّ، يطلب التحقق منه بالبريد الإلكترونيّ فقط
الخطوات:
- ضغط محتويات مجلد
firefox/ في ملف ZIP
- رفع الملف على مركز مطوري AMO
- انتظار التحقق التلقائي ومتابعة المشاكل المذكورة فيه، هذا يعطيك فكرة ممتازة عمّا يجب عليك تعديله في الإضافة قبل الإرسال للمراجعة وهو غير موجود في كروم
- تقديم للمراجعة، المراجعة تستغرق حوالي أسبوع، لكن ربما هذا التأخر كان بسبب عطلة رأس السنة الميلادية في حالتي
ملاحظة أخيرة حول النشر في فايرفوكس: لا يوجد دعم للغة العربية في خيارات متجر الإضافات رغم وجود الكثير من اللغات الأخرى، بل حتى وجود اللغة العبرية (تكتب أيضاً من اليمين لليسار) وهذا غريب جداً، لا أدري كيف يمكننا دفعهم نحو دعم اللغة العربية أو المساهمة في هذا، لكنّي أرى أنّ دعمها في متجر الإضافات ضروريّ جداً.
هذا رابط للإضافة على متجر فايرفوكس للإضافات هنا لمن يرغب بتحميلها
