chrome.devtools.panels

الوصف

استخدِم واجهة برمجة التطبيقات chrome.devtools.panels لدمج إضافتك في واجهة مستخدم نافذة "أدوات المطوّرين": أنشئ لوحاتك الخاصة، ويمكنك الوصول إلى اللوحات الحالية وإضافة أشرطة جانبية.

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

يمكنك استخدام الطريقة devtools.panels.setOpenResourceHandler لتثبيت دالة استدعاء معالجة طلبات المستخدم لفتح مرجع (عادةً ما يكون النقر على رابط مرجع في نافذة "أدوات المطوّر"). يتم استدعاء واحد فقط من المعالِجات المثبَّتة كحد أقصى، ويمكن للمستخدمين تحديد (باستخدام مربع الحوار "إعدادات أدوات المطوّرين") السلوك التلقائي أو إضافة للتعامل مع طلبات فتح موارد. إذا كانت إحدى الإضافات تستدعي setOpenResourceHandler() عدة مرات، يتم الاحتفاظ بالمعالج المُستخدَم أخيرًا فقط.

اطّلِع على ملخّص واجهات برمجة تطبيقات أدوات المطوّرين للحصول على مقدّمة عامة حول استخدام واجهات برمجة تطبيقات أدوات المطوّرين.

البيان

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

"devtools_page"

مثال

تضيف التعليمة البرمجية التالية لوحة مضمّنة في Panel.html، ويمثّلها FontPicker.png على شريط أدوات "أدوات المطوّرين"، ويتم تصنيفها على أنّها أداة اختيار الخطوط:

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

يضيف الرمز البرمجي التالي لوحة على الشريط الجانبي ضمن Sidebar.html بعنوان خصائص الخط إلى لوحة "العناصر"، ثمّ يضبط ارتفاعها على 8ex:

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

توضِّح لقطة الشاشة تأثير هذا المثال في نافذة "أدوات المطوّرين":

لوحة رموز الإضافات في شريط أدوات "أدوات مطوّري البرامج في Chrome"
لوحة رموز الإضافات في شريط أدوات "أدوات مطوّري البرامج"

لتجربة واجهة برمجة التطبيقات هذه، ثبِّت مثال واجهة برمجة التطبيقات devtools panels API من مستودع chrome-extension-samples.

الأنواع

Button

زر أنشأته الإضافة

أماكن إقامة

  • onClicked

    الحدث<functionvoidvoid>

    يتم تشغيله عند النقر على الزر.

    تبدو الدالة onClicked.addListener على النحو التالي: 

    (callback: function) => {...}

    • ردّ الاتصال

      دالة

      تظهر المَعلمة callback على النحو التالي: 

      () => void

  • تحديث

    غير صالح

    تعديل سمات الزر في حال حذف بعض الوسيطات أو null، لن يتم تعديل السمات المقابلة.

    تبدو الدالة update على النحو التالي: 

    (iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}

    • iconPath

      سلسلة اختيارية

      مسار الرمز الجديد للزر

    • tooltipText

      سلسلة اختيارية

      النص المعروض كتلميح عندما يمرّر المستخدم مؤشّر الماوس فوق الزر

    • غير مفعّلة

      منطقي اختياري

      ما إذا كان الزر غير مفعّل

ElementsPanel

يمثّل لوحة "العناصر".

أماكن إقامة

  • onSelectionChanged

    الحدث<functionvoidvoid>

    يتم تشغيله عند اختيار عنصر في اللوحة.

    تظهر الدالة onSelectionChanged.addListener على النحو التالي: 

    (callback: function) => {...}

    • ردّ الاتصال

      دالة

      تظهر المَعلمة callback على النحو التالي: 

      () => void

  • createSidebarPane

    غير صالح

    لإنشاء لوحة ضمن الشريط الجانبي للوحة

    تبدو الدالة createSidebarPane على النحو التالي: 

    (title: string, callback?: function) => {...}

    • title

      سلسلة

      النص الذي يظهر في عنوان الشريط الجانبي

    • ردّ الاتصال

      الدالة اختيارية

      تظهر المَعلمة callback على النحو التالي: 

      (result: ExtensionSidebarPane) => void

      • عنصر ExtensionSidebarPane للوحة الشريط الجانبي التي تم إنشاؤها

ExtensionPanel

تمثّل لوحة أنشأتها إضافة.

أماكن إقامة

  • onHidden

    الحدث<functionvoidvoid>

    يتم تشغيله عندما ينتقل المستخدم بعيدًا عن اللوحة.

    تظهر الدالة onHidden.addListener على النحو التالي: 

    (callback: function) => {...}

    • ردّ الاتصال

      دالة

      تظهر المَعلمة callback على النحو التالي: 

      () => void

  • onSearch

    الحدث<functionvoidvoid>

    يتم تشغيله عند إجراء بحث (بدء بحث جديد أو التنقّل في نتائج البحث أو إلغاء البحث).

    تبدو الدالة onSearch.addListener على النحو التالي: 

    (callback: function) => {...}

    • ردّ الاتصال

      دالة

      تظهر المَعلمة callback على النحو التالي: 

      (action: string, queryString?: string) => void

      • إجراء

        سلسلة

      • queryString

        سلسلة اختيارية

  • onShown

    الحدث<functionvoidvoid>

    يتم تشغيله عندما ينتقل المستخدم إلى اللوحة.

    تبدو الدالة onShown.addListener على النحو التالي: 

    (callback: function) => {...}

    • ردّ الاتصال

      دالة

      تظهر المَعلمة callback على النحو التالي: 

      (window: Window) => void

      • نافذة

        نافذة

  • createStatusBarButton

    غير صالح

    تُستخدَم لإلحاق زرّ بشريط حالة اللوحة.

    تظهر الدالة createStatusBarButton على النحو التالي: 

    (iconPath: string, tooltipText: string, disabled: boolean) => {...}

    • iconPath

      سلسلة

      المسار إلى رمز الزر يجب أن يحتوي الملف على صورة بحجم 64×24 بكسل تتألف من رمزَين بحجم 32×24 بكسل. يتم استخدام الرمز الأيسر عندما يكون الزر غير مفعّل، ويتم عرض الرمز الأيمن عند الضغط على الزر.

    • tooltipText

      سلسلة

      النص المعروض كتلميح عندما يمرّر المستخدم مؤشّر الماوس فوق الزر

    • غير مفعّلة

      قيمة منطقية

      ما إذا كان الزر غير مفعّل

ExtensionSidebarPane

شريط جانبي أنشأته الإضافة

أماكن إقامة

  • onHidden

    الحدث<functionvoidvoid>

    يتم تشغيله عندما يصبح مربّع لوحة الشريط الجانبي مخفيًا نتيجةً لتبديل المستخدم من اللوحة التي تستضيف مربّع لوحة الشريط الجانبي.

    تبدو الدالة onHidden.addListener على النحو التالي: 

    (callback: function) => {...}

    • ردّ الاتصال

      دالة

      تظهر المَعلمة callback على النحو التالي: 

      () => void

  • onShown

    الحدث<functionvoidvoid>

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

    تظهر الدالة onShown.addListener على النحو التالي: 

    (callback: function) => {...}

    • ردّ الاتصال

      دالة

      تظهر المَعلمة callback على النحو التالي: 

      (window: Window) => void

      • نافذة

        نافذة

  • setExpression

    غير صالح

    تُستخدَم لضبط تعبير يتم تقييمه ضمن الصفحة التي يتم فحصها. يتم عرض النتيجة في لوحة الشريط الجانبي.

    تظهر الدالة setExpression على النحو التالي: 

    (expression: string, rootTitle?: string, callback?: function) => {...}

    • تعبير

      سلسلة

      تعبير يجب تقييمه في سياق الصفحة التي يتم فحصها. يتم عرض كائنات JavaScript وعُقَد DOM في شجرة قابلة للتوسيع تشبه وحدة التحكّم/المشاهدة.

    • rootTitle

      سلسلة اختيارية

      عنوان اختياري لجذر شجرة التعبير

    • ردّ الاتصال

      الدالة اختيارية

      تظهر المَعلمة callback على النحو التالي: 

      () => void

  • setHeight

    غير صالح

    لضبط ارتفاع الشريط الجانبي

    تظهر الدالة setHeight على النحو التالي: 

    (height: string) => {...}

    • الطول

      سلسلة

      مواصفات مقاس مشابهة لتلك المستخدَمة في CSS، مثل '100px' أو '12ex'

  • setObject

    غير صالح

    تُستخدَم لضبط عنصر متوافق مع JSON ليتم عرضه في لوحة الشريط الجانبي.

    تبدو الدالة setObject على النحو التالي: 

    (jsonObject: string, rootTitle?: string, callback?: function) => {...}

    • jsonObject

      سلسلة

      عنصر ليتم عرضه في سياق الصفحة التي تم فحصها يتم تقييمها في سياق المُتصل (عميل واجهة برمجة التطبيقات).

    • rootTitle

      سلسلة اختيارية

      عنوان اختياري لجذر شجرة التعبير

    • ردّ الاتصال

      الدالة اختيارية

      تظهر المَعلمة callback على النحو التالي: 

      () => void

  • setPage

    غير صالح

    لضبط صفحة HTML ليتم عرضها في لوحة الشريط الجانبي

    تظهر الدالة setPage على النحو التالي: 

    (path: string) => {...}

    • المسار

      سلسلة

      المسار النسبي لصفحة إضافة لعرضها في الشريط الجانبي

SourcesPanel

يمثّل لوحة "المصادر".

أماكن إقامة

  • onSelectionChanged

    الحدث<functionvoidvoid>

    يتم تشغيله عند اختيار عنصر في اللوحة.

    تبدو الدالة onSelectionChanged.addListener على النحو التالي: 

    (callback: function) => {...}

    • ردّ الاتصال

      دالة

      تظهر المَعلمة callback على النحو التالي: 

      () => void

  • createSidebarPane

    غير صالح

    لإنشاء لوحة ضمن الشريط الجانبي للوحة

    تبدو الدالة createSidebarPane على النحو التالي: 

    (title: string, callback?: function) => {...}

    • title

      سلسلة

      النص الذي يظهر في عنوان الشريط الجانبي

    • ردّ الاتصال

      الدالة اختيارية

      تظهر المَعلمة callback على النحو التالي: 

      (result: ExtensionSidebarPane) => void

      • عنصر ExtensionSidebarPane للوحة الشريط الجانبي التي تم إنشاؤها

أماكن إقامة

elements

لوحة "العناصر"

النوع

ElementsPanel

sources

لوحة "المصادر"

النوع

SourcesPanel

themeName

Chrome 59 والإصدارات الأحدث

اسم مظهر الألوان الذي تم ضبطه في إعدادات "أدوات المطوّرين" للمستخدم. القيم المحتمَلة: default (القيمة التلقائية) وdark.

النوع

سلسلة

الطُرق

create()

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
)

لإنشاء لوحة إضافة

المعلمات

  • title

    سلسلة

    العنوان الذي يظهر بجانب رمز الإضافة في شريط أدوات "أدوات المطوّرين"

  • iconPath

    سلسلة

    مسار رمز اللوحة بالنسبة إلى دليل الإضافات

  • pagePath

    سلسلة

    مسار صفحة HTML للوحة بالنسبة إلى دليل الإضافة

  • ردّ الاتصال

    الدالة اختيارية

    تظهر المَعلمة callback على النحو التالي: 

    (panel: ExtensionPanel) => void

    • لوحة

      ExtensionPanel

      عنصر ExtensionPanel يمثّل اللوحة التي تم إنشاؤها

openResource()

chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
)

تطلب من "أدوات المطوّرين" فتح عنوان URL في لوحة "أدوات المطوّرين".

المعلمات

  • url

    سلسلة

    عنوان URL للمورد المطلوب فتحه

  • lineNumber

    الرقم

    تحدِّد رقم السطر الذي تريد الانتقال إليه عند تحميل المورد.

  • columnNumber

    رقم اختياري

    الإصدار 114 من Chrome والإصدارات الأحدث

    تحدِّد هذه الوسيطة رقم العمود الذي تريد الانتقال إليه عند تحميل المورد.

  • ردّ الاتصال

    الدالة اختيارية

    تظهر المَعلمة callback على النحو التالي: 

    () => void

setOpenResourceHandler()

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
)

تُحدِّد الدالة التي سيتمّ استدعاؤها عندما ينقر المستخدِم على رابط مورد في نافذة "أدوات المطوّرين". لإلغاء ضبط معالِج الحدث، استخدِم الطريقة بدون معلَمات أو مرِّر القيمة null كمَعلمة.

المعلمات

  • ردّ الاتصال

    الدالة اختيارية

    تظهر المَعلمة callback على النحو التالي: 

    (resource: Resource) => void