15 KiB

Raw Blame History

مشروع إضافة المتصفح الجزء الأول: كل شيء عن المتصفحات

رسم توضيحي بواسطة وسيم شغام

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

المقدمة

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

عن المتصفح

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

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

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

بعض المتصفحات القديمة، عبر كارين ماكجرين

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

البدء

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

تحتاج إلى:

مفتاح API; أدخل بريدك الإلكتروني في المربع الموجود في هذه الصفحة وسيتم إرسال واحد إليك
رمز منطقتك المقابل لـ خريطة الكهرباء (في بوسطن، على سبيل المثال، أستخدم 'US-NEISO').
الكود المبدئي. قم بتنزيل مجلد start; ستكمل الكود في هذا المجلد.
NPM - NPM هو أداة إدارة الحزم؛ قم بتثبيتها محليًا وسيتم تثبيت الحزم المدرجة في ملف package.json الخاص بك للاستخدام في أصول الويب الخاصة بك

✅ تعرف على المزيد حول إدارة الحزم في هذا الوحدة التعليمية الممتازة

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

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

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

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

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

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

في مجلد /dist، ستقوم ببناء نموذج ومنطقة نتائج. في ملف index.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>

هذا هو النموذج حيث سيتم إدخال المعلومات المحفوظة وتخزينها في التخزين المحلي.

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

<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 لعملية بناء الإضافة الخاصة بك. يمكنك رؤية ناتج هذه العملية من خلال النظر في /dist/main.js - سترى أن الكود قد تم تجميعه.

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

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

تحدي GitHub Copilot Agent 🚀

استخدم وضع الوكيل لإكمال التحدي التالي:

الوصف: قم بتحسين إضافة المتصفح عن طريق إضافة ميزات التحقق من صحة النموذج وردود فعل المستخدم لتحسين تجربة المستخدم عند إدخال مفاتيح API ورموز المناطق.

المهمة: قم بإنشاء وظائف تحقق JavaScript تتحقق مما إذا كان حقل مفتاح API يحتوي على 20 حرفًا على الأقل وإذا كان رمز المنطقة يتبع التنسيق الصحيح (مثل 'US-NEISO'). أضف ردود فعل مرئية عن طريق تغيير ألوان حدود المدخلات إلى الأخضر للمدخلات الصحيحة والأحمر للمدخلات غير الصحيحة. أضف أيضًا ميزة تبديل لإظهار/إخفاء مفتاح API لأغراض الأمان.

🚀 التحدي

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

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

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

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

تاريخ متصفحات الويب

تاريخ الشبكة

مقابلة مع تيم بيرنرز-لي

الواجب

إعادة تصميم الإضافة الخاصة بك

إخلاء المسؤولية:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.

15 KiB Raw Blame History