ملحقات مفيدة لمطوري جوجل كروم. ملحقات Google Chrome لتطوير الويب والمزيد. ملحق مطور الويب

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

المتصفحات مهمة ليس فقط للمستخدمين، ولكن لمطوري الويب أيضًا. إنها بمثابة ساحة الاختبار الرئيسية للمبرمجين حيث يمكنهم العمل وتجميع وتعديل صفحات الويب قبل نشرها. عندما يتعلق الأمر بمتصفحات الويب، فمن الواضح أن Google Chrome هو الفائز. إنها أداة كاملة الميزات مع نظام بيئي كامل من المكونات الإضافية والأدوات التي تعزز قدراتها وتسمح للمستخدمين بتخصيصها بالطريقة التي يريدونها.

يعد Google Chrome App Store موطنًا لآلاف من المكونات الإضافية والأدوات. لتسهيل حياتك، قمنا باستشارة أفضل شركات تطوير الويب للتوصل إلى قائمة تضم 10 مكونات إضافية قيمة لمتصفح Google Chrome لمطوري الويب.

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

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

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

Stylebot هو حلم كل مطور ويب يتحقق. يتيح لك التعامل بسرعة مع جميع العناصر المرئية لموقع الويب باستخدام CSS المخصص. تقريبًا أي عنصر - حجم الخط والحواف واللون والرؤية وما إلى ذلك. - يمكن اختيارها وتغييرها حسب رغبة المطور. يعد Stylebot أداة رائعة لضبط تصميم موقع الويب الخاص بك، ويقدم مساعدة رائعة للمبتدئين ومطوري الويب المحترفين.

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

يعد Speed ​​Tracer أمرًا ضروريًا لجميع مطوري الويب، ويساعد في تحديد مشكلات أداء موقع الويب والتطبيقات واستكشاف الأخطاء وإصلاحها. يتعرف برنامج Speed ​​Tracer على المشكلات الناجمة عن تنفيذ JavaScript، والتخطيط، وعمليات إعادة النشر لـ XML http، وإعادة حساب أنماط CSS، والمزيد.

التصميم والنص يشكلان وجه الموقع. يسمح موقع Corporate Ipsum لمطوري الويب بإدراج نص وهمي بأي طول في موقع الويب. تصبح هذه الفرصة ذات أهمية كبيرة عند اتخاذ القرارات المتعلقة بتخطيط الموقع وتقديم نموذج العمل للعميل.

توفر هذه الأداة العديد من الميزات مثل فحص عناصر HTML المستندة إلى الماوس وصلاحية خصائص CSS، مع توفير تمثيل مرئي غني لعناصر HTML وDOM.

أداة مهمة جدًا لمطوري الويب وتحسين محركات البحث، تضعك Alexa Traffic Rank في لوحة المرور الخاصة بـ Alexa وتمنحك عرضًا تفصيليًا لجميع المواقع التي تزورها دون مقاطعة تصفحك.

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

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

هذه المقالة مخصصة لمشرفي ومطوري Chrome Enterprise ذوي الخبرة في إنشاء حزم تطبيقات Chrome ونشرها.

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

تحضير

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

الخطوة 1: إنشاء تطبيق أو ملحق

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

1. قم بإنشاء مجلد على جهاز الكمبيوتر الخاص بك حيث سيتم تخزين ملفات التطبيق أو الامتداد. أعطه اسم التطبيق.
2. إنشاء ملف البيان.
   1. قم بإنشاء ملف JavaScript ® Object Notation (JSON) في محرر النصوص. اطلع على مثال لملف JSON لتطبيق إشارة مرجعية.
   2. تحقق مما إذا كان الكود الموجود في ملف JSON منسقًا بشكل صحيح باستخدام أداة مثل JSONLint.
3. ضع الملف البيان.jsonإلى مجلد التطبيق أو الملحق.
4. إنشاء شعار.
   1. يجب أن يكون حجم الصورة 128 × 128 بكسل.
   2. احفظ ملف الشعار باسم 128.pngفي مجلد التطبيق.

الخطوة 2: اختبار التطبيق أو الامتداد

يمكن للمطورين اختبار تطبيقاتهم وإضافاتهم في متصفح Chrome أو على أجهزة تعمل بنظام التشغيل Chrome.

لاستكشاف أخطاء أحد التطبيقات أو الإضافات وإصلاحها، استخدم سجلات Chrome.

الخطوة 3: إنشاء مجموعة تطبيقات (اختياري)

يمكن للمشرف إنشاء معرض تطبيقات للمؤسسة للتوصية بتطبيقات وإضافات Chrome للمستخدمين لتثبيتها.

الخطوة 4: انشر تطبيقك أو امتدادك على سوق Chrome الإلكتروني

يمكن للمطور إتاحة تطبيق أو ملحق للعامة أو تقييد الوصول إليه. عند النشر إلى سوق Chrome الإلكتروني، لديك ثلاثة خيارات للاختيار من بينها.

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

لإضافة تطبيق أو ملحق إلى سوق Chrome الإلكتروني، أنشئ أرشيف ZIP للمجلد المناسب، ثم انشر المنتج.

الخطوة 5. قم بإعداد قواعد العمل مع التطبيق أو الامتداد

تتيح لك لوحة مشرف Google إدارة كيفية استخدامك للتطبيقات والإضافات على أجهزة Chrome ومتصفح Chrome على أجهزة الكمبيوتر التي تعمل بنظام التشغيل Windows، وMac، وLinux في مؤسستك. يمكن تخصيص قواعد Chrome

مع تزايد شعبية متصفح Google Chrome، تظهر الإضافات التي توفر الوقت لمطوري الويب من خلال منحهم القدرة على تتبع الأخطاء ومشاكل أداء الموقع.

فيما يلي بعض الإضافات المفيدة لمتصفح Google Chrome.

ملحق مطور الويب

أود أن أشير إلى الأداة الأكثر ملاءمة وقوة لمطور الويب ومصمم الويب - ملحق مطور الويب لمتصفح Google Chrome.

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

يحتوي الامتداد على عدد كبير من الخيارات.

على سبيل المثال، كثير من الناس يحتاجون فقط معرفة لون العنصرعلى شاشة العرض بالتنسيق الست عشري. البرنامج المساعد لديه وظيفة خاصة لهذا الغرض. في القسم متنوع، حدد Display Color Picker.

من خلال تحديد Display Color Picker، يصبح المؤشر على شكل علامة متقاطعة. الآن، يؤدي النقر على أي منطقة من الشاشة في الزاوية اليمنى السفلية من المتصفح إلى عرض اللون بالنظام الست عشري للاستخدام في CSS.

ليس سراً أن مواقع الويب اليوم تستخدم أوراق الأنماط المتتالية (CSS) لاحتواء معلمات جميع عناصر الصفحة. يحدد CSS الخطوط وأحجام الكائنات والإطارات والصور والكتل والجداول. قررنا أن نجمع لك مجموعة مختارة من الوظائف الإضافية لـ Google Chrome والتي ستتيح لك تعديل نمط أي صفحة على الإنترنت. كمكافأة، سنوضح لك كيفية تغيير خلفية الصفحة.

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

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

ستايلبوت

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

تجاوز الويب

تطبيق لربط نصوص جافا سكريبت بالمواقع الخارجية. تحتوي بالفعل على jQuery وasync.js وmoment.js وLodash، لذلك يمكن استخدام وظائف هذه المكتبات بحرية. مناسب للمستخدمين المتقدمين الذين يعرفون كيفية استخدام Javascript، ولكن يمكن للمبتدئين استخدام الامتداد لتنفيذ البرامج النصية التي كتبها شخص آخر بالفعل.

الطراز

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

أنيق

أقوى أداة لتخصيص موقع الويب، تشبه في إمكانياتها Stylebot. يتيح لك إخفاء العناصر غير الضرورية وتحرير الأنماط ومشاركة النتيجة مع الأصدقاء. يحتوي موقع الويب الخاص بالوظيفة الإضافية على أكثر من 10000 نمط مخصص لتغيير مظهر Facebook وYouTube وApp Store والعديد من الموارد الشائعة الأخرى.

محرر CSS المباشر

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

سنخبرك، كما وعدناك، بكيفية تعديل خلفية أي صفحة باستخدام Stylebot كمثال.

مهم! تبدو هذه الطريقة جميلة على الصفحات "الخفيفة" غير المثقلة بالكتل والقوائم ويتم تقديمها فقط للتعرف على إمكانيات الوظائف الإضافية. نوصي بتجربته على Google.com.

• انتقل إلى الصفحة المطلوبة
• انقر على أيقونة Stylebot في الزاوية اليمنى العليا من Chrome
• انقر فوق فتح Stylebot
• في الأسفل حدد خيار تحرير Css
• أدخل الكود التالي:

جسم (
الخلفية: url(https://dl.dropboxusercontent.com/u/28029149/NGC_2818_by_the_Hubble_Space_Telescope.jpg) ؛
حجم الخلفية: 100% 100%؛
!مهم؛
}

• أغلق ستايلبوت

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

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

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

مراجعات قناة جوجل كروم

• مستقر: تستقبل هذه القناة إصدارات المتصفح التي تم اختبارها بالكامل بواسطة فريق اختبار Google ولا تحتوي على أي خلل كبير أو مشكلات كبيرة. يتم تحديث القناة كل أسبوعين للإصدارات المتوسطة وكل 6 أسابيع للإصدارات الرئيسية. يمكنك تنزيل النسخة المستقرة على الصفحة - جوجل كروم .
• بيتا: إذا كنت ترغب في اختبار الميزات والتحسينات الجديدة بأقل قدر من المخاطر، فإن القناة التجريبية هي خيار رائع. يتم تحديث الإصدارات كل أسبوع، وتظهر الإصدارات الرئيسية كل 6 أسابيع، أي قبل أكثر من شهر من إصدار الإصدار الثابت.
• ديف: إذا كنت ترغب في التعرف على الابتكارات في أسرع وقت ممكن، فإن قناة Dev مناسبة لك. تتلقى قناة Dev التحديثات مرة أو مرتين في الأسبوع وتظهر بوضوح التحسينات التي يعمل عليها فريق Chrome. لا يوجد أي تأخير بالنسبة للإصدارات الرئيسية ويتلقى المستخدم أحدث التعليمات البرمجية. على الرغم من أن هذه التجميعات تم اختبارها، إلا أنها قد تحتوي على عدد كبير من الأخطاء.
• كناري: يتم اختبار التغييرات المتعلقة بالمخاطر في إصدارات Canary. يتم إصدار الإصدارات يوميًا ولا يتم اختبارها مسبقًا. نظرًا لعدم وجود ضمان بتشغيل هذه الإصدارات، فإنها تستخدم ملف التعريف والإعدادات الخاصة بها، مما يعني أنها يمكن أن تعمل بالتوازي مع الإصدارات من قناة Chrome أخرى. بشكل افتراضي، تقوم إصدارات Canary بإبلاغ Google عن الأعطال وإحصائيات الاستخدام، ولكن يمكنك تعطيل هذا الخيار في صفحة التنزيل.
• بنيات أخرى: إذا كنت مختبرًا مقدامًا تمامًا، فيمكنك تنزيل أحدث إصدار عمل من مسار تطوير Chromium من خلال النظر إلى الرقم الموجود ضمن "LKGR"، والانتقال إلى قسم التنزيل في Google وتنزيل الإصدار المناسب.

ملاحظة: سيتم ترجمة إصدارات الوصول المبكر (إصدارات Canary وDev وBeta) جزئيًا فقط إلى لغات أخرى غير الإنجليزية. لا يجوز ترجمة النص المرتبط بالميزات الجديدة إلى لغات أخرى حتى يتم إصدار نسخة مستقرة.

ما الذي تحتاج إلى معرفته قبل تغيير القناة؟

النسخ الاحتياطي للبيانات

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

قم بعمل نسخة من مجلد الدليل User Data\Default (على سبيل المثال، قم بنسخه إلى المجلد "Default Backup" الموجود في نفس الدليل). يعتمد المسار على نظام التشغيل:

• القنوات الثابتة والتجريبية وقنوات التطوير: \Documents and Settings\username\Local Settings\Application Data\Google\Chrome\User Data\Default
• إصدارات Canary: \Documents and الإعدادات\اسم المستخدم\الإعدادات المحلية\Application Data\Google\Chrome SxS\User Data\Default

ويندوز فيستا أو 7:

• القنوات الثابتة والتجريبية وقنوات التطوير: \Users\username\AppData\Local\Google\Chrome\User Data\Default
• إصدارات Canary: \Users\username\AppData\Local\Google\Chrome SxS\User Data\Default

• القنوات الثابتة والتجريبية وقنوات التطوير: ~/Library/Application Support/Google/Chrome/Default
• إصدارات Canary: ~/Library/Application Support/Google/Chrome Canary/Default

• ~/.config/google-chrome/Default

ملاحظة: إذا كنت تستخدم مستكشف Windows للبحث عن مجلد، فقد تحتاج إلى تمكين خيار "إظهار المجلدات والملفات المخفية" في لوحة التحكم > خيارات المجلد (خيارات المستكشف) > عرض