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

الإضافات هي حِزم مضغوطة من 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" إجراء متصفّح:

لقطة شاشة لإضافة 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 إضافية مضمّنة في الإضافة.

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

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

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

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

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

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

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

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

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

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

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

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

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

إذا كان على الإضافة توجيه علامة التبويب المحدّدة حاليًا إلى عنوان 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 المخصّص من خلال المراجع التالية.