Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools & Tips
Code

تطوير اضافات قوقل كروم 

by
Difficulty:IntermediateLength:LongLanguages:

Arabic (العربية/عربي) translation by Asaad (you can also view the original English article)

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

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


لماذا يجب عليك كتابة الامتداد الخاص بك

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


تطوير واختبار ملحقاتك

ولحسن الحظ ، هناك طريقة لاختبار ملحقاتك دون الحاجة إلى تحميلها على سوق كروم الإلكتروني. في شريط العناوين بالمتصفح ، اكتب فقط فيه:

تأكد من التحقق من وضع مطور البرامج والنقر على زر تحميل ملحق فارغ .... ثم قم ببساطة بتحديد المجلد من القرص الثابت الذي يحتوي على ملفات الامتداد.

extensionspanel

أسلوب بناء

في ما يلي رسم تخطيطي لتصميم امتداد كروم:

architecture

والآن دعونا نلقي نظرة فاحصة على كل عنصر داخل الهيكل.

قائمة

نقطة إدخال الملحق هي ملف manifest.json. يجب أن يحتوي على كائن JSON صالح. على سبيل المثال:

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

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

صفحات الخلفية

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

إليك كيفية وصفها في القائمة:

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

نص المحتوى

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

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

واجهة المستخدم

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

عمل المتصفح

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

browseraction

يجب أن تحتوي ملفات القائمة على البيانات التالية:

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

كان هذا هو الرمز الذي اعتدت على إنتاج الصورة أعلاه.

عمل الصفحة

تشبه الخاصية إجراء الصفحة إجراء المتصفح ، ولكن يظهر الرمز داخل شريط العناوين:

pageaction

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

لإضافة إجراء الصفحة ، اكتب الشفرة البرمجية التالية داخل بيانك:

على عكس رمز إجراء المتصفح ، لا تحتوي أيقونة إجراء الصفحة على علامات مميزة.

ادوات المطورين

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

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

ثم قم بتضمين الشفرة البرمجية التالية داخل ملف devtools.js:

الآن ، سيضيف الكود السابق علامة تبويب جديدة باسم "اسم الملحق الخاص بك" وبمجرد النقر عليه ، يقوم المتصفح بتحميل index.html داخل "أدوات المطور".

المربع متعدد الاستخدامات

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

ثم أضف الشفرة أدناه ، داخل النص البرمجي للخلفية:

يجب أن تكون قادرًا على كتابة نعم داخل شريط العنوان. ثم سترى شيئًا كهذا:

omnibox

سيؤدي الضغط على علامة التبويب إلى ظهور الشاشة التالية:

omnibox2

بالطبع باستخدام واجهة برمجة تطبيقات مربع كروم المتعدد الاستخدامات ، يمكنك التقاط مدخلات المستخدم والرد على هذا الإدخال.

واجهات برمجة التطبيقات

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

ما يجب أن تعرفه هو أن ليست كل واجهات برمجة التطبيقات متاحة في كل جزء من ملحقك. على سبيل المثال ، يتعذر على نص المحتوى الخاص بك الوصول إلى chrome.devtools.panels أو يتعذر على البرنامج النصي الموجود في علامة التبويب DeveloperTools قراءة DOM الخاص بالصفحة. لذا ، إذا كنت تتساءل عن سبب عدم نجاح شيء ما ، فقد يكون هذا هو السبب.

الرسائل

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

طلبات لمرة واحدة

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

ثم استخدم الرمز من أسفل في النص البرمجي للمحتوى الخاص بك:

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

اتصالات طويلة الأجل

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

ثم في نص الخلفية ، استخدم هذا:

تجاوز الصفحات

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

تتمثل القيم المحتملة لـ <تجاهل الصفحة>  في الإشارات المرجعية والسجل و صفحة جديدة. من الرائع أن تكون لديك صفحة علامة تبويب جديدة.


ملحق مثال

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

ملف القائمة

بالطبع لقد بدأت مع ملف القائمة:

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

نص الخلفية

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

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

إجراء المتصفح

نبدأ بملف popup.html الخاص بنا:

ثم نقوم بإنشاء ملف popup.js:

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

ادوات المطورين

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

نص المحتوى

يستمع النص البرمجي للمحتوى لرسالة ما ، ويختار كل divs الموجودة في الصفحة الحالية ، ويغير لون الخلفية. إيلاء الاهتمام إلى المشروع الذي أرفقت المستمع له. في نص المحتوى ، يكون chrome.extension.onMessage.

تخصيص صفحة علامة التبويب الجديدة

آخر شيء يقوم به هذا الملحق هو تخصيص صفحة علامة التبويب الجديدة. يمكننا القيام بذلك بسهولة فقط من خلال الإشارة إلى خاصية علامة تبويب جديدة إلى ملف newtab / newtab.html:

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

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


التصحيح

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


استنتاج

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

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.