يسمح إنشاء إضافة متصفح مخصّصة بتوسيع وظائف المتصفح وتحسين الإنتاجية أو حل مشكلة متكررة بنقرة واحدة. ومع الدعم المتزايد للمعايير المشتركة، أصبح تطوير إضافة واحدة تعمل على أكثر من متصفح هدفًا واقعيًا للمبتدئين والمحترفين على حد سواء.
يعتمد نجاح الإضافة على فهم البنية الأساسية لملفاتها، وآلية الصلاحيات، وكيفية التفاعل مع صفحات الويب بأمان وكفاءة. عند الالتزام بالمعايير القياسية، يمكن تقليل التعديلات اللازمة لكل متصفح وتسريع عملية النشر.
يوفّر هذا الدليل خطوات واضحة لبناء إضافة متصفح متوافقة مع كروم وفايرفوكس وغيرها، مع التركيز على أفضل الممارسات التي تضمن الأداء والاستقرار وسهولة الصيانة على المدى الطويل.
بفضل مبادرة WebExtensions وتقنيات الويب الأساسية، أصبح تطوير إضافات متوافقة مع مختلف المتصفحات أمرًا سهلاً. باستخدام تنسيق موحد، يمكنك كتابة إضافات تعمل في أي مكان، دون الحاجة إلى استهداف متصفحات محددة.
تعرّف على كيفية برمجة واختبار أول إضافة لك لإجراء تعديلات مخصصة على أي صفحة ويب.
ما هي إضافات الويب؟
إضافات الويب هي إضافات متوافقة مع مختلف المتصفحات، تستخدم واجهات برمجة تطبيقات الويب (APIs) لتحسين الوظائف الافتراضية لمتصفحات الويب. تُوزّع الإضافات كشفرة مصدرية، وتستخدم مجموعة تقنيات الويب الأساسية: HTML وCSS وJavaScript.
على الرغم من أن الإضافات موجودة منذ ما يقارب 30 عامًا، إلا أن المتصفحات كانت تستخدم تقليديًا أساليب مختلفة لدعمها. هذا يعني أن إضافة Chrome لم تكن متوافقة مع متصفح Firefox، والعكس صحيح. بفضل جهود التوحيد القياسي، وتوحيد العديد من المتصفحات حول محرك Chromium، أصبح هذا الأمر أقل إشكالية. منذ عام 2021، تهدف مبادرة WebExtensions إلى تنظيم هذا النظام البيئي بشكل رسمي. في الظروف المثالية، يُمكّن هذا المطورين من كتابة إضافة مرة واحدة وجعلها متاحة لجميع المتصفحات.
تابع القراءة لتتعرف على كيفية تطوير إضافات حديثة ومتوافقة مع جميع المتصفحات باستخدام منصة الويب؛ الأمر أسهل مما تتخيل!
ملاحظة: على الرغم من أن WebExtensions تهدف إلى أن تكون محايدة للمتصفحات، إلا أن Firefox هو أسهل متصفح لتطويرها، حيث يسمح لك بتحميل الإضافة مؤقتًا. في المقابل، يتطلب Safari اشتراكًا مدفوعًا للمطورين.
كتابة ملف البيان: الشيء الوحيد الذي تحتاجه كل إضافة هو ملف بيان يصف بنيتها العامة. إليك مثال:
{
"manifest_version": 3,
"name": "my first extension",
"version": "1.0",
"icons": {
"16": "app/images/icon16.png",
"48": "app/images/icon48.png",
"128": "app/images/icon128.png"
},
"permissions": [
"webNavigation",
"storage"
],
}
ملاحظة
هذا الملف بصيغة JSON، ما يعني أنه يمكنك استخدام أي أداة من الأدوات المتاحة لتعديله أو عرضه.
ثلاثة مفاتيح فقط مطلوبة: الاسم، الإصدار، و manifest_version. مفتاحا الاسم والإصدار خاصان بتطبيقك، وقيمهما الفعلية ليست مهمة جدًا لهذا الشرح. مع ذلك، سيرفض متصفح Chrome تحميل إضافتك إذا كان الإصدار غير صالح، لذا تأكد من أنه عدد صحيح مفصول بنقاط من 1 إلى 4، مثل “0” أو “0.0.1”.
يُعدّ manifest_version نقطة حساسة بعض الشيء: فبينما قد تدعم متصفحات أخرى الإصدارين 1 و2، سيرفض Chrome تحميل أي إضافة ما لم تستخدم الإصدار 3. استخدام هذا الإصدار يُقلل من تحكمك، ولكن إذا كنت ترغب في دعم Chrome، فعليك استخدامه.
إضافةً إلى ذلك، يمكن لملف manifest استخدام العديد من المفاتيح الأخرى لوصف طبيعة إضافتك. تشمل هذه المفاتيح المؤلف، والوصف، والأيقونات، والتي قد تكون مفيدة للترويج لإضافتك في المتجر. يتيح لك مفتاح الأوامر تحديد اختصارات لوحة المفاتيح.
يُعدّ مفتاح content_scripts أحد أهم مفاتيح البيان، حيث يسمح لإضافتك بتحميل ملفات JavaScript أو CSS وتطبيقها على صفحة الويب.
"content_scripts": [{
"matches": ["https://en.wikipedia.org/wiki/*"],
"js": ["script.js"],
"css": ["style.css"]
}]
يجب أن يحتوي كل عنصر في ملف content_scripts على مفتاح matches، الذي يُحدد عناوين URL التي يعمل عليها الامتداد. يتيح لك مفتاحا js وcss سرد البرامج النصية أو أوراق الأنماط التي يجب على الامتداد تحميلها عند عرض صفحة مُطابقة.
كتابة كود الامتداد
يُحاكي هذا المثال البسيط Tampermonkey، وهو امتداد شائع يُتيح لك تخصيص صفحات الويب. باستخدام Tampermonkey، يُمكنك القيام بأمور مثل إصلاح موجز Reddit لتجنب عرض “الأفضل”.
باستخدام ملف manifest وقليل من JavaScript، يُمكنك بسهولة كتابة امتداد ويب بسيط. سيُغير هذا المثال طريقة عرضك لصفحات ويكيبيديا، ولكن الإمكانيات لا حدود لها؛ فكل ما يُمكنك فعله بصفحة ويب مُتاح.
{
"manifest_version": 3,
"name": "tweakipedia",
"description": "Tweak Wikipedia pages to our liking",
"version": "1.0",
"content_scripts": [{
"matches": ["https://en.wikipedia.org/wiki/*"],
"js": ["tweakipedia.js"],
"css": ["tweakipedia.css"]
}]
}
سأبدأ ببساطة، باستخدام بعض أكواد CSS لتغيير بعض الأمور بما يتناسب مع تفضيلاتي الشخصية. على سبيل المثال، لا أحب إشعار “مطلوب المزيد من المراجع”؛ فهو يُشتت انتباه القارئ العادي. لذا سأخفيه بتحديد فئة العنصر وتعيين خاصية العرض الخاصة به إلى “none”.
.box-More_citations_needed { display: none; }
إذا كنت تشعر بعدم الرغبة في فعل الخير، يمكنك أيضًا إخفاء إعلان جمع التبرعات:
.cn-fundraising { display: none; }
بعد ذلك، أجد علامات الحواشي مشتتة للانتباه بعض الشيء، لذا سأقلل من أهميتها قليلاً عن طريق تعديل لونها:
sup a { color: rgb(51, 102, 204, 0.5); }
لاحظ أن هذا هو اللون الافتراضي مع قناة ألفا بنسبة 50%، مما يعني أنه شبه شفاف. يساعد هذا في تخفيف وضوح هذه العلامات.
وبالنظر إلى هذا المفهوم بشكل أعمق، أرغب في إخفاء (أو تعديل) عناصر أخرى، ولكن عند الحاجة فقط، مع إمكانية التراجع عن التغيير بسهولة. يتطلب هذا القليل من جافا سكريبت، ولكن بشكل بسيط للغاية!
toggle_on_key("Escape", "sup a,.mw-editsection,.vector-page-toolbar");
function toggle_on_key(key, sels) {
document.addEventListener("keydown", function (ev) {
if (ev.key === key) {
document.querySelectorAll(sels).forEach(function (node) {
node.style.display = node.style.display === "none" ? "" : "none";
});
}
});
}
لقد أنشأتُ دالةً مُيسِّرةً لإخفاء/إظهار عناصر مُحدَّدة عند الضغط على مفتاح مُعيَّن. يقوم مُعالج الحدث ببساطة بالبحث عن مفتاح مُطابق، ثم يجد جميع العناصر التي تُطابق مُحدِّدًا، ويُخفيها أو يُظهرها بناءً على حالتها المرئية. يستخدم هذا نفس خاصية CSS (display) المُستخدمة في ورقة الأنماط؛ ولكنه يستخدم JavaScript لتطبيقها ديناميكيًا.
تثبيت واستخدام الإضافة
بعد تجهيز كل شيء، حان وقت تثبيت الإضافة وتجربتها.
في متصفح Firefox، انتقل إلى about:debugging، واختر “هذا Firefox” من القائمة الجانبية، ثم انقر على زر “تحميل إضافة مؤقتة”. اختر أيًا من ملفاتك (ملف البيان أو أي ملف برمجي) وافتحه.
في متصفح كروم، انتقل إلى chrome://extensions/، وقم بتفعيل وضع المطور باستخدام زر التبديل الموجود في أعلى اليمين، ثم انقر على زر “تحميل الملفات غير المضغوطة” في أعلى اليسار. حدد المجلد الذي يحتوي على ملفات الإضافة الخاصة بك.
يُفترض أن تتمكن من رؤية الإضافة تعمل على أي صفحة من صفحات ويكيبيديا. من المفترض أن تُغير مظهر الصفحة من هذا الشكل:
عند تثبيت الإضافة وتفعيلها، يجب أن تبدو صفحة ويكيبيديا على هذا النحو، مع إخفاء الإشعار البارز وروابط الحواشي السفلية بلون أفتح:
إن بناء إضافة متصفح متوافقة مع عدة متصفحات يفتح الباب أمام وصول أوسع وتجربة استخدام أفضل دون تعقيد إضافي. الالتزام بالمعايير المشتركة منذ البداية يقلّل الجهد ويزيد فرص نجاح الإضافة.
ابدأ بخطوة صغيرة، اختبر الإضافة على أكثر من متصفح، ووسّع ميزاتها تدريجيًا لضمان جودة عالية وانتشار أوسع بين المستخدمين.
