دليل إنشاء أول إضافة لمتصفح الكروم خطوتك الأولى لتطوير الويب
Admin-C95-24
·
تم النشر: 11 Mar, 2018
اخر تعديل: 26 Feb, 2026
فهرس المقال
إذا كنت مبرمجًا مبتدئًا وتسعى إلى إنشاء أول إضافة لمتصفح الكروم Google Chrome لإثبات مهاراتك وتحويل أفكارك البرمجية إلى أدوات عملية، فأنت في المكان الصحيح، حيث أننا في شركة كود95 نؤمن بأن الفجوة بين المستخدم والمطور ستتلاشى عندما تفهم الأساسيات بصورة صحيحة، ولهذا نأخذ بيدك في رحلة تعليمية مبسطة لفهم بنية الإضافات بدءًا من ملف manifest.json الذي يمثل الهوية الرسمية لأي إضافة.
ما المقصود بـ إنشاء أول إضافة لمتصفح الكروم؟ وكيف تعمل؟
قبل كتابة أي سطر برمجي، من المهم أن نفهم الفكرة الجوهرية.
إضافة المتصفح (Extension) هي أداة برمجية صغيرة تمنح المتصفح وظيفة جديدة لم تكن متاحة فيه مسبقًا، فهي لا تُعد برنامجًا مستقلًا، بل مجموعة ملفات تعمل داخل المتصفح وتتفاعل مع الصفحات التي تزورها.
لذا ندعوك بأن تتخيل أنك تشاهد مقطعًا تعليميًا عبر الإنترنت، لكن مستوى الصوت منخفض رغم ضبط إعدادات الجهاز على الحد الأقصى، من هنا يمكن لإضافة بسيطة أن تعزز الصوت بلمسة واحدة.
إذن يُعد هذا المثال ملخص واضح للفكرة كالتالي:
الإضافة هي قدرة إضافية تمنحها للمتصفح لتلبية احتياج محدد، إذًا، عمل إضافة للمتصفح يعني ببساطة: منح المتصفح مهارة جديدة عبر ملفات برمجية خفيفة تعتمد على 3 محاور أساسية وهي:
- HTML لبناء الواجهة.
- CSS لتنسيقها.
- JavaScript لتنفيذ المنطق البرمجي.
اقرا ايضا: ادارة المواقع الإلكترونية
المكونات الأساسية لبناء إضافتك الأولى
لبدء مشروعك الأول، تحتاج إلى إنشاء مجلد يحتوي على ثلاثة عناصر رئيسية:
- ملف التعريف (manifest.json): وهو الركيزة الأساسية التي تعرف المتصفح بإضافتك.
- واجهة المستخدم (HTML): وهي الملف الذي يحدد شكل النافذة الصغيرة التي تظهر عند الضغط على أيقونة الإضافة.
- ملف JavaScript: وهو المسؤول عن تنفيذ الأوامر البرمجية والتفاعل مع صفحة الويب، مثل تضخيم الصوت أو تغيير الألوان والأحداث والحركة.
ثم من بعد تجهيز هذه الملفات، سيصبح لديك الهيكل الأساسي الذي يمكن للمتصفح قراءته وتشغيله.
ولكن الإضافة لا تعني برمجيًا انشاء برنامج ضخم، بل هي مجرد عدة ملفات بسيطة (HTML, CSS, JavaScript) تعمل في خلفية المتصفح وتتفاعل مع المواقع التي تزورها.
والآن عليك متابعتنا خطوة بخطوة وبالأمثلة لنشرح لك كيف يعمل كل ملف من هذه الملفات الثلاثة وما هو معناه ووظيفته في إنشاء إضافتك الأولى، هيا لرحلة علمية ماهرة.
ما هو ملف manifest.json؟ ولماذا يُعد القلب النابض لأي إضافة؟
هذا الملف هو حجر الأساس في أي إضافة فهو أهم وأول شيء تفعله عند البدء لذلك يجب معرفة كينونته بدقة كبيرة، فبدونه، لن يتعرف المتصفح على مشروعك إطلاقًا.
ببساطة شديدة لتفهم هو عبارة عن ملف نصي بصيغة JSON، يقرأه المتصفح ليعرف اسم الإضافة، إصدارها، وما هي الصلاحيات التي تحتاجها لتعمل، ويحتوي على معلومات تعريفية مثل:
- اسم الإضافة
- رقم الإصدار
- وصفها
- الصلاحيات المطلوبة
- الصفحة التي ستظهر عند الضغط على الأيقونة
والآن إليك نموذجًا مبسطًا يمكنك البدء به:
{{
"manifest_version": 3,
"name": "أداتي الأولى",
"version": "1.0",
"description": "إضافة تجريبية لتعلم أساسيات البرمجة",
"action": {
"default_popup": "index.html"
}
}
بهذا الملف تكون قد أنجزت خطوة أساسية للغاية بمعنى قطعت نصف الطريق، ثم يأتي دور الاختبار.
كيف تختبر الإضافة على متصفحك؟
بعد حفظ ملفاتك داخل مجلد واحد على الجهاز لديك، تبدأ في اختبار اضافتك الأولى بإتباع الخطوات التالية:
- افتح متصفح Google Chrome لديك بالجهاز.
- اكتب في شريط العنوان: chrome://extensions
- ثم فعل خيار وضع المطور (Developer Mode).
- اضغط على زر Load unpacked (بالعربي: تحميل إضافة غير محزمة).
- اختر المجلد الذي أنشأته.
ستظهر الإضافة مباشرة في شريط المتصفح، ويمكنك الضغط عليها لرؤية النتيجة.
اكتشف المزيد عن: أهمية إنشاء موقع لشركتك: السر وراء نجاح التجارة الإلكترونية
مثال 1: إنشاء واجهة بسيطة للإضافة (index.html) وتغيير لون الصفحة
بدأنا بهذا المثال لأنه الأبسط في التكويد، حيث تحتاج الإضافة إلى شكل ومظهر معين يمكنك تصميمه بواجهة بسيطة جدًا في البداية ثم تنتقل للأعقد مع الوقت كلما أتقنت الأمر، وما عليك في البداية هو أن تنشيء ملفًا باسم index.html ثم تضع بداخله الكود التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>إضافتي الأولى</title>
</head>
<body>
<h3>مرحبًا بك</h3>
<button id="btn">غيّر لون الصفحة</button>
<script src="script.js"></script>
</body>
</html>
HTML هو كود الشكل أو واجهة الصفحة بمعنى يحدد شكل النافذة التي ستظهر عند الضغط على أيقونة الإضافة.
إضافة المنطق البرمجي جافا سكريبت (script.js)
الآن أنشئ ملفًا باسم script.js واكتب فيه عن طريق نسخ الكود التالي:
document.getElementById("btn").addEventListener("click", function() {
document.body.style.backgroundColor = "lightblue";
});
كود الاسكريبت خاص بالحركة والـتأثيرات الخاصة بالاضافة، وبهذا المثال البسيط، عند الضغط على الزر سيتغير لون خلفية الصفحة، ويمكنك لاحقًا تطوير الفكرة لإضافة وظائف أكثر احترافية.
مثال 2: إنشاء إضافة تضخيم الصوت
هل واجهت يومًا انخفاض الصوت عند تشغيل أحد الأفلام أو الفيديوهات على شاشة تلفاز سمارت (ذكية) متصلة باللاب توب، رغم أنك تضبط الصوت من الاعدادات على أعلى قيمة؟ وقد تظن أن المشكلة في الجهاز، لكنها ليست كذلك تابع وأنت تفهم أكثر.
هنا تظهر فائدة إضافات متصفح كروم؛ حيث تم استخدام إضافة تعتمد على Web Audio API لإضافة طبقة تضخيم برمجية داخل الصفحة نفسها، مما أدى إلى زيادة مستوى الصوت دون الحاجة إلى تعديل إعدادات النظام، لكن في الواقع يمكن للإضافة معالجة الأمر من داخل الصفحة نفسها.
الفكرة باختصار شديد وبساطة كبيرة: الإضافة لا ترفع صوت الجهاز، بل تضيف مُضخمًا برمجيًا للصوت قبل خروجه من المتصفح.
لنشرح لك خطوة بخطوة: ماذا يحدث برمجيًا؟
يمكننا تبسيط العملية في ثلاث خطوات:
- تلتقط الإضافة عنصر الفيديو أو الصوت الموجود في الصفحة.
- تنشئ بيئة معالجة صوتية (Audio Context).
- تضيف عنصر تضخيم (Gain) لزيادة شدة الصوت قبل تشغيله.
كيف نفهم ذلك بدون تعقيد وطريقة قيامك بعمل الإضافة؟
تخيّل أن الصوت يمر في أنبوب قبل أن يصل إلى السماعة، فالإضافة تضيف داخل هذا الأنبوب جزءًا صغيرًا يقوم بتقوية الإشارة، وهكذا يخرج الصوت أعلى، دون تغيير إعدادات النظام.
كود الفكرة بشكل مبسط جدًا
const video = document.querySelector("video");
const audioContext = new AudioContext();
const source = audioContext.createMediaElementSource(video);
const gainNode = audioContext.createGain();
gainNode.gain.value = 2;
source.connect(gainNode);
gainNode.connect(audioContext.destination);
ما يعنيه الكود هو:
- اختيار فيديو.
- ثم ننشئ معالجًا للصوت.
- إضافة مضخمًا.
- تحديد مستوى التضخيم.
- ربط الصوت بالمخرج النهائي.
- وأخيرًا نخبره بأنه انتهى الأمر.
أخطاء شائعة يجب تجنبها
- نسيان تطابق اسم الملف بين manifest وملفات المشروع.
- إياك وكتابة JSON بشكل غير صحيح (فاصلة زائدة قد تمنع الإضافة من العمل).
- عدم تفعيل وضع المطور قبل تحميل الإضافة.
كيف تطور إضافتك لاحقًا؟
بعد فهمك للأساسيات، يمكنك التوسع وتطوير اضافتك عبر:
- استخدام Content Scripts للتفاعل مع عناصر الصفحات.
- إضافة أيقونات متعددة المقاسات.
- طلب صلاحيات إضافية داخل ملف manifest.
- نشر الإضافة على متجر Chrome Web Store.
تعرف ايضا على: أفضل شركة استضافة مواقع في السعودية
لماذا تختار شركة كود95 لإنشاء إضافتك على كروم؟
لأن الشركة توفر دعمًا متكاملاً في كل خطوة من المشروع، فهي تمتلك خبرة طويلة في تطوير حلول الويب الحديثة، مع عدة مميزات تساعدك على اتمام المهمة كاملة كالتالي:
- خدمات متكاملة شاملة لجميع احتياجات المشروع بداية من تصميم وتطوير المواقع، التطبيقات، وحتى تطوير إضافات الويب المتقدمة.
- تصميم واجهات وتجربة مستخدم مميزة لتظهر إضافتك بشكل احترافي وتكون سهلة الاستخدام للمستخدمين من أول ضغطة.
- تطوير احترافي باستخدام أحدث التقنيات البرمجية الآمنة والمدعومة بأداء قوي.
- دعم فني شامل من التحليل إلى التنفيذ.
- خبرة طويلة في السوق لتقديم حلول رقمية موثوقة.
- سجل حافل مع عملاء كبار وعلامات تجارية كبيرة.
الخاتمة
الآن بعد أن تعرفت على خطوات إنشاء أول إضافة لمتصفح الكروم وفهمت كيفية تطويرها وتجنب الأخطاء، حان الوقت للخطوة التالية لتبدأ رحلتك الربحية مع شركة كود95 من اليوم وتستفد من خبراتها في تطوير إضافات كروم باحترافية ووصولك لملايين المستخدمين بسهولة.
الأسئلة الشائعة حول إنشاء أول إضافة لمتصفح الكروم
هل يمكنني تحويل فكرة بسيطة إلى إضافة تعمل لملايين المستخدمين؟
هل يمكن أن تكون هذه الإضافات مصدر دخل حقيقي في المستقبل؟
كيف أختبر إضافتي قبل نشرها؟
هل تقدم الشركة خدمات نشر الإضافات على متجر Chrome Web Store؟
ما الميزات التي يمكن إضافتها لتطوير الإضافة لاحقًا؟
آراء العملاء
- "شركة كود95 قدمت حلولًا مبتكرة لمشاريعنا الرقمية، وكان فريقها متعاونًا واحترافيًا."
- "بفضل خبرة شركة كود95، تمكنا من إطلاق اضافتنا على كروم بكفاءة وسرعة."
- "أحسن شركة للتطوير، وفريقها يدعمنا في كل خطوة من الفكرة حتى التنفيذ."
- "شركة كود95 من أسرع الشركات في تحويل الأفكار إلى أدوات عملية قابلة للاستخدام."
- "خبرة الشركة في تطوير مواقع وتطبيقات الهاتف وإضافات كروم جعلت مشروعنا يحقق نتائج ملموسة."
تم النشر: 11 Mar, 2018
اخر تعديل: 26 Feb, 2026
Admin-C95-24
اقرأ أيضًا
استضافة مواقع سعودية
أنواع الاستضافة، دليل شامل ومقارنة مفصلة لاختيار مثالي
اكتشف افضل شركة استضافة سعودية
شركة استضافة مواقع، لماذا كود 95 هي الأفضل في مصر والسعودية؟
أفضل شركة استضافة مواقع في السعودية
