<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "2326d04e194a10aa760b51f5e5a1f61d",
  "translation_date": "2025-08-28T14:58:24+00:00",
  "source_file": "5-browser-extension/1-about-browsers/README.md",
  "language_code": "ar"
}
-->
# مشروع إضافة المتصفح الجزء الأول: كل شيء عن المتصفحات

![رسم توضيحي للمتصفح](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.ar.jpg)  
> رسم توضيحي بواسطة [وسيم شغام](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)

## اختبار ما قبل المحاضرة

[اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/23)

### المقدمة

إضافات المتصفح تضيف وظائف إضافية للمتصفح. ولكن قبل أن تبدأ في بناء واحدة، يجب أن تتعلم قليلاً عن كيفية عمل المتصفحات.

### عن المتصفح

في هذه السلسلة من الدروس، ستتعلم كيفية بناء إضافة متصفح تعمل على متصفحات Chrome وFirefox وEdge. في هذا الجزء، ستكتشف كيفية عمل المتصفحات وتضع الأساسيات لعناصر إضافة المتصفح.

ولكن ما هو المتصفح بالضبط؟ إنه تطبيق برمجي يسمح للمستخدم النهائي بالوصول إلى المحتوى من الخادم وعرضه على صفحات الويب.

✅ قليل من التاريخ: أول متصفح كان يُسمى "WorldWideWeb" وتم إنشاؤه بواسطة السير تيموثي بيرنرز-لي في عام 1990.

![متصفحات قديمة](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.ar.jpg)  
> بعض المتصفحات القديمة، عبر [كارين مكجرين](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)

عندما يتصل المستخدم بالإنترنت باستخدام عنوان URL (محدد موقع الموارد الموحد)، عادةً باستخدام بروتوكول نقل النص التشعبي عبر عنوان `http` أو `https`، يتواصل المتصفح مع خادم الويب ويجلب صفحة ويب.

في هذه المرحلة، يقوم محرك العرض الخاص بالمتصفح بعرض الصفحة على جهاز المستخدم، والذي قد يكون هاتفًا محمولًا أو جهاز كمبيوتر مكتبي أو محمول.

كما أن المتصفحات لديها القدرة على تخزين المحتوى مؤقتًا حتى لا يتم استرجاعه من الخادم في كل مرة. يمكنها تسجيل تاريخ نشاط التصفح الخاص بالمستخدم، وتخزين "الكوكيز"، وهي أجزاء صغيرة من البيانات تحتوي على معلومات تُستخدم لتخزين نشاط المستخدم، والمزيد.

من المهم جدًا أن تتذكر أن المتصفحات ليست كلها متشابهة! لكل متصفح نقاط قوة وضعف، ويحتاج مطور الويب المحترف إلى فهم كيفية جعل صفحات الويب تعمل بشكل جيد عبر المتصفحات المختلفة. يشمل ذلك التعامل مع الشاشات الصغيرة مثل شاشات الهواتف المحمولة، وكذلك المستخدمين الذين يعملون في وضع عدم الاتصال.

موقع مفيد جدًا يجب أن تضيفه إلى مفضلتك في أي متصفح تفضله هو [caniuse.com](https://www.caniuse.com). عندما تقوم ببناء صفحات ويب، من المفيد جدًا استخدام قوائم التقنيات المدعومة في caniuse لدعم المستخدمين بأفضل طريقة ممكنة.

✅ كيف يمكنك معرفة المتصفحات الأكثر شيوعًا بين مستخدمي موقعك؟ تحقق من تحليلاتك - يمكنك تثبيت حزم تحليلات مختلفة كجزء من عملية تطوير الويب الخاصة بك، وستخبرك بالمتصفحات الأكثر استخدامًا من قبل المستخدمين.

## إضافات المتصفح

لماذا قد ترغب في بناء إضافة متصفح؟ إنها أداة مفيدة تُضاف إلى متصفحك عندما تحتاج إلى الوصول السريع إلى المهام التي تكررها بشكل متكرر. على سبيل المثال، إذا كنت بحاجة إلى التحقق من الألوان على صفحات الويب المختلفة التي تتفاعل معها، قد تقوم بتثبيت إضافة متصفح لاختيار الألوان. إذا كنت تواجه صعوبة في تذكر كلمات المرور، قد تستخدم إضافة متصفح لإدارة كلمات المرور.

كما أن تطوير إضافات المتصفح ممتع أيضًا. فهي عادةً ما تدير عددًا محدودًا من المهام التي تؤديها بشكل جيد.

✅ ما هي إضافات المتصفح المفضلة لديك؟ وما هي المهام التي تؤديها؟

### تثبيت الإضافات

قبل أن تبدأ في البناء، ألقِ نظرة على عملية بناء ونشر إضافة متصفح. على الرغم من أن كل متصفح يختلف قليلاً في كيفية إدارة هذه المهمة، إلا أن العملية متشابهة في Chrome وFirefox كما في هذا المثال على Edge:

![لقطة شاشة لمتصفح Edge تعرض صفحة الإضافات المفتوحة وقائمة الإعدادات المفتوحة](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.ar.png)  

> ملاحظة: تأكد من تفعيل وضع المطور والسماح بالإضافات من المتاجر الأخرى.

بشكل أساسي، ستكون العملية كالتالي:

- قم ببناء الإضافة باستخدام `npm run build`  
- انتقل في المتصفح إلى لوحة الإضافات باستخدام زر "الإعدادات والمزيد" (رمز `...`) في الزاوية العلوية اليمنى  
- إذا كانت تثبيتًا جديدًا، اختر `load unpacked` لتحميل إضافة جديدة من مجلد البناء الخاص بها (في حالتنا هو `/dist`)  
- أو، انقر على `reload` إذا كنت تعيد تحميل الإضافة المثبتة بالفعل  

✅ هذه التعليمات تتعلق بالإضافات التي تبنيها بنفسك؛ لتثبيت الإضافات التي تم إصدارها في متجر إضافات المتصفح المرتبط بكل متصفح، يجب الانتقال إلى تلك [المتاجر](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) وتثبيت الإضافة التي تختارها.

### ابدأ الآن

ستقوم ببناء إضافة متصفح تعرض البصمة الكربونية لمنطقتك، وتُظهر استخدام الطاقة في منطقتك ومصدر هذه الطاقة. ستحتوي الإضافة على نموذج يجمع مفتاح API حتى تتمكن من الوصول إلى واجهة برمجة التطبيقات الخاصة بـ CO2 Signal.

**ما تحتاجه:**

- [مفتاح API](https://www.co2signal.com/)؛ أدخل بريدك الإلكتروني في المربع الموجود في هذه الصفحة وسيتم إرسال المفتاح إليك  
- [رمز منطقتك](http://api.electricitymap.org/v3/zones) المرتبط بـ [خريطة الكهرباء](https://www.electricitymap.org/map) (في بوسطن، على سبيل المثال، أستخدم 'US-NEISO')  
- [الكود المبدئي](../../../../5-browser-extension/start). قم بتنزيل مجلد `start`؛ ستكمل الكود في هذا المجلد  
- [NPM](https://www.npmjs.com) - NPM هو أداة لإدارة الحزم؛ قم بتثبيته محليًا وسيتم تثبيت الحزم المدرجة في ملف `package.json` الخاص بك لاستخدامها في أصول الويب الخاصة بك  

✅ تعرف على المزيد حول إدارة الحزم في هذا [الدليل الممتاز](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)

خذ دقيقة لتفحص قاعدة الكود:

dist  
    -|manifest.json (الإعدادات الافتراضية هنا)  
    -|index.html (تنسيق HTML للواجهة الأمامية هنا)  
    -|background.js (كود JavaScript الخلفي هنا)  
    -|main.js (كود JavaScript المدمج)  
src  
    -|index.js (كود JavaScript الخاص بك هنا)  

✅ بمجرد أن يكون لديك مفتاح API ورمز المنطقة جاهزين، قم بتخزينهما في مكان ما كملاحظة للاستخدام المستقبلي.

### بناء HTML للإضافة

تحتوي هذه الإضافة على عرضين. الأول لجمع مفتاح API ورمز المنطقة:

![لقطة شاشة للإضافة المكتملة مفتوحة في المتصفح، تعرض نموذجًا يحتوي على مدخلات لاسم المنطقة ومفتاح API.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.ar.png)

والثاني لعرض استخدام الكربون في المنطقة:

![لقطة شاشة للإضافة المكتملة تعرض قيمًا لاستخدام الكربون ونسبة الوقود الأحفوري لمنطقة US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.ar.png)

لنبدأ ببناء HTML للنموذج وتنسيقه باستخدام CSS.

في مجلد `/dist`، ستقوم ببناء نموذج ومنطقة نتائج. في ملف `index.html`، قم بملء منطقة النموذج المحددة:

```HTML
<form class="form-data" autocomplete="on">
	<div>
		<h2>New? Add your Information</h2>
	</div>
	<div>
		<label for="region">Region Name</label>
		<input type="text" id="region" required class="region-name" />
	</div>
	<div>
		<label for="api">Your API Key from tmrow</label>
		<input type="text" id="api" required class="api-key" />
	</div>
	<button class="search-btn">Submit</button>
</form>	
```  
هذا هو النموذج حيث سيتم إدخال المعلومات المحفوظة وتخزينها في التخزين المحلي.

بعد ذلك، قم بإنشاء منطقة النتائج؛ تحت علامة النموذج النهائية، أضف بعض الأقسام:

```HTML
<div class="result">
	<div class="loading">loading...</div>
	<div class="errors"></div>
	<div class="data"></div>
	<div class="result-container">
		<p><strong>Region: </strong><span class="my-region"></span></p>
		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
	</div>
	<button class="clear-btn">Change region</button>
</div>
```  
في هذه المرحلة، يمكنك تجربة البناء. تأكد من تثبيت تبعيات الحزم لهذه الإضافة:

```
npm install
```  

سيستخدم هذا الأمر npm، مدير حزم Node، لتثبيت webpack لعملية بناء الإضافة الخاصة بك. Webpack هو أداة تجميع تتعامل مع تجميع الكود. يمكنك رؤية ناتج هذه العملية من خلال النظر في `/dist/main.js` - سترى أن الكود قد تم تجميعه.

في الوقت الحالي، يجب أن يتم بناء الإضافة وإذا قمت بنشرها في Edge كإضافة، سترى نموذجًا معروضًا بشكل أنيق.

تهانينا، لقد اتخذت الخطوات الأولى نحو بناء إضافة متصفح. في الدروس القادمة، ستجعلها أكثر فاعلية وفائدة.

---

## 🚀 التحدي

ألقِ نظرة على متجر إضافات المتصفح وقم بتثبيت واحدة على متصفحك. يمكنك فحص ملفاتها بطرق مثيرة للاهتمام. ماذا تكتشف؟

## اختبار ما بعد المحاضرة

[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/24)

## المراجعة والدراسة الذاتية

في هذا الدرس تعلمت قليلاً عن تاريخ متصفح الويب؛ اغتنم هذه الفرصة لتتعلم عن كيفية تصور مخترعي الشبكة العالمية لاستخدامها من خلال قراءة المزيد عن تاريخها. بعض المواقع المفيدة تشمل:

[تاريخ متصفحات الويب](https://www.mozilla.org/firefox/browsers/browser-history/)  

[تاريخ الشبكة](https://webfoundation.org/about/vision/history-of-the-web/)  

[مقابلة مع تيم بيرنرز-لي](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)  

## الواجب

[أعد تصميم الإضافة الخاصة بك](assignment.md)  

---

**إخلاء المسؤولية**:  
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.