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

الإضافات عبارة عن حِزم مضغوطة من ملفات 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 الإضافية المتوفّرة في الإضافة.

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

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

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

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

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

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

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

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

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

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

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

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

تكون معظم طُرق واجهة برمجة تطبيقات 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 والتواصل من خلال تمرير الرسائل.

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

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

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

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

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

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

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