نظرة عامة على البنية

الإضافات هي حزم مضغوطة من HTML وCSS وJavaScript والصور وغيرها من الملفات المستخدمة في الويب. التي تخصص تجربة التصفح في Google Chrome. الإضافات التي تم إنشاؤها باستخدام الويب ويمكنه استخدام واجهات برمجة التطبيقات نفسها التي يوفرها المتصفح للويب المفتوح.

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

يمكنك الاستفادة من الإضافات في جعل متصفّح Chrome المتصفّح الأكثر تخصيصًا.

ملفات الإضافات

تختلف الإضافات في أنواع الملفات وعدد الأدلة، ولكن يلزم أن يكون لها [البيان][docs-manifest]. قد تتكون بعض الإضافات الأساسية والمفيدة في الوقت ذاته من بيان رمز شريط الأدوات.

يقدّم ملف البيان، الذي يحمل العنوان manifest.json، معلومات للمتصفّح حول الإضافة، مثل باعتبارها أهم الملفات والإمكانيات التي قد تستخدمها الإضافة.

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

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

تستخدم إضافة Google Mail Checker إجراءً في المتصفح:

لقطة شاشة لإضافة Google Mail Checker

تستخدم إضافة Mappy هذه إجراءً على الصفحة ومحتوى النص البرمجي:

لقطة شاشة لإضافة Mappy

الإشارة إلى الملفات

يمكن الإشارة إلى ملفات امتداد باستخدام عنوان URL نسبي، تمامًا مثل الملفات في ملف HTML عادي .

<img src="images/my_image.png">

بالإضافة إلى ذلك، يمكن أيضًا الوصول إلى كل ملف باستخدام عنوان URL كامل.

chrome-extension://EXTENSION_ID/PATH_TO_FILE

في عنوان URL المطلق، تمثّل السمة EXTENSION_ID معرّفًا فريدًا يستخدمه نظام الإضافات لكل إضافة. يمكن عرض أرقام التعريف لجميع الإضافات التي تم تحميلها من خلال الانتقال إلى عنوان URL. chrome://extensions. PATH_TO_FILE هو موقع الملف ضمن المجلد العلوي للإضافة؛ فإنه يتطابق مع عنوان URL النسبي.

يمكن أن يتغيّر رقم تعريف الإضافة أثناء العمل على إضافة تم فك ضغطها. على وجه التحديد، المُعرف ستتغير الإضافة فك ضغطها إذا تم تحميلها من دليل مختلف. فإن المعرف سوف يتم تغييره مرة أخرى عند تجميع الإضافة. إذا كانت رمز الإضافة تعتمد على عنوان URL مطلق، استخدام الطريقة chrome.runtime.getURL() لتجنُّب إدخال رمز ثابت في الترميز أثناء والتطوير.

البنية

ستعتمد بنية الإضافة على وظائفها، ولكن العديد من الإضافات القوية ستعتمد. تتضمن مكونات متعددة:

نص برمجي للخلفية

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

عناصر واجهة المستخدم

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

يمكن أن تتضمّن صفحات واجهة مستخدم الإضافة، مثل نافذة منبثقة، صفحات HTML عادية تتضمّن JavaScript. المنطق. يمكن للإضافات أيضًا استدعاء tabs.create أو window.open() لعرضها ملفات HTML إضافية موجودة في الامتداد.

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

نافذة متصفح تحتوي على إجراء صفحة يعرض نافذة منبثقة

النصوص البرمجية للمحتوى

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

نافذة متصفِّح تحتوي على إجراء على صفحة ونص برمجي للمحتوى

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

تعرِض مسار اتصال بين النص البرمجي للمحتوى والإضافة الرئيسية.

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

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

استخدام واجهات برمجة تطبيقات Chrome

فضلاً عن إمكانية الوصول إلى واجهات برمجة التطبيقات نفسها مثل صفحات الويب، يمكن للإضافات أيضًا استخدام واجهات برمجة التطبيقات الخاصة بالإضافات والتي تنشئ تكاملاً مكثّفًا مع المتصفح. الإضافات يمكن لصفحات الويب الوصول إلى طريقة window.open() العادية لفتح عنوان URL، ولكن يمكن للإضافات تحديد النافذة التي يجب عرض عنوان URL فيها باستخدام Chrome API tabs.create بدلاً من ذلك.

الطرق غير المتزامنة مقابل الطرق المتزامنة

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

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

إذا كانت طريقة tabs.query متزامنة، قد تظهر على النحو التالي.

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

لن ينجح هذا الأسلوب لأنّ query() غير متزامن. يعود بدون انتظار العمل إكماله، ولا يكون ناتجًا قيمة. تكون الطريقة غير متزامنة عندما تكون معلَمة معاودة الاتصال المتاحة في توقيعها.

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

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

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

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

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

تؤدي هذه الطريقة إلى عرض عنوان URL بشكل متزامن كـ string ولا تنفِّذ أي عمل آخر غير متزامن.

مزيد من التفاصيل

لمزيد من المعلومات، يمكنك الاطّلاع على المستندات المرجعية لواجهة برمجة تطبيقات Chrome ومشاهدة ما يلي: الفيديو القادم.

التواصل بين الصفحات

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

حفظ البيانات ووضع التصفّح المتخفي

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

يَعد وضع التصفّح المتخفّي بأنّ النافذة لن تترك أي مسارات. عند التعامل مع البيانات من في وضع التصفّح المتخفي، يجب أن تفي الإضافات بهذا الوعد. إذا كانت الإضافة تحفظ وضع التصفّح عادةً السجلّ، لا تحفظ السجل من نوافذ التصفح المتخفي. ومع ذلك، يمكن للإضافات تخزين الإعدادات الإعدادات المفضّلة من أي نافذة، سواء في وضع التصفّح المتخفي أم لا.

لرصد ما إذا كانت إحدى النوافذ في وضع التصفّح المتخفي، اطّلِع على السمة incognito في العنصر tabs.Tab أو windows.Window.

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

اتخاذ الخطوة التالية

بعد قراءة النظرة العامة وإكمال البرنامج التعليمي البدء، يجب أن يكون المطورون مستعدين لبدء كتابة إضافاتهم الخاصة! انغمِس في عالم إلى Chrome المخصص باستخدام الموارد التالية.