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-extension-samples. المستودع.

الأنواع

Button

زرّ تُنشئه الإضافة

أماكن إقامة

  • onClicked

    الحدث <functionuffful>

    يتم إطلاقه عند النقر على الزر.

    تبدو دالة onClicked.addListener كما يلي:

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

    • رد الاتصال

      دالة

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

      () => void

  • تحديث

    فراغ

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

    تبدو دالة update كما يلي:

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

    • iconPath

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

      المسار إلى رمز الزر الجديد.

    • tooltipText

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

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

    • غير مفعّلة

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

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

ElementsPanel

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

أماكن إقامة

  • onSelectionChanged

    الحدث <functionuffful>

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

    تبدو دالة onSelectionChanged.addListener كما يلي:

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

    • رد الاتصال

      دالة

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

      () => void

  • createSidebarPane

    فراغ

    تنشئ جزءًا داخل الشريط الجانبي للوحة.

    تبدو دالة createSidebarPane كما يلي:

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

    • title

      سلسلة

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

    • رد الاتصال

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

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

      (result: ExtensionSidebarPane) => void

      • كائن ExtensionSidebarPane لجزء الشريط الجانبي الذي تم إنشاؤه

ExtensionPanel

يمثل هذا الممثل لوحة تم إنشاؤها باستخدام إضافة.

أماكن إقامة

  • onHidden

    الحدث <functionuffful>

    يتم إطلاقه عندما يبتعد المستخدم عن اللوحة.

    تبدو دالة onHidden.addListener كما يلي:

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

    • رد الاتصال

      دالة

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

      () => void

  • onSearch

    الحدث <functionuffful>

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

    تبدو دالة onSearch.addListener كما يلي:

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

    • رد الاتصال

      دالة

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

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

      • إجراء

        سلسلة

      • queryString

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

  • onShown

    الحدث <functionuffful>

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

    تبدو دالة onShown.addListener كما يلي:

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

    • رد الاتصال

      دالة

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

      (window: Window) => void

      • نافذة

        نافذة

  • createStatusBarButton

    فراغ

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

    تبدو دالة createStatusBarButton كما يلي:

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

    • iconPath

      سلسلة

      المسار إلى رمز الزر. يجب أن يحتوي الملف على صورة بحجم 64×24 بكسل مؤلفة من رمزين بحجم 32×24. يُستخدم الأيقونة اليسرى عندما يكون الزر غير نشط؛ يظهر الأيقونة اليمنى عند الضغط على الزر.

    • tooltipText

      سلسلة

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

    • غير مفعّلة

      منطقي

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

ExtensionSidebarPane

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

أماكن إقامة

  • onHidden

    الحدث <functionuffful>

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

    تبدو دالة onHidden.addListener كما يلي:

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

    • رد الاتصال

      دالة

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

      () => void

  • onShown

    الحدث <functionuffful>

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

    تبدو دالة 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

    الحدث <functionuffful>

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

    تبدو دالة onSelectionChanged.addListener كما يلي:

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

    • رد الاتصال

      دالة

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

      () => void

  • createSidebarPane

    فراغ

    تنشئ جزءًا داخل الشريط الجانبي للوحة.

    تبدو دالة createSidebarPane كما يلي:

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

    • title

      سلسلة

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

    • رد الاتصال

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

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

      (result: ExtensionSidebarPane) => void

      • كائن ExtensionSidebarPane لجزء الشريط الجانبي الذي تم إنشاؤه

أماكن إقامة

elements

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

النوع

sources

لوحة المصادر

النوع

themeName

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

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

النوع

سلسلة

الطُرق

create()

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

تنشئ لوحة إضافات.

المعلمات

  • title

    سلسلة

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

  • iconPath

    سلسلة

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

  • pagePath

    سلسلة

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

  • رد الاتصال

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

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

    (panel: ExtensionPanel) => void

    • لوحة

      كائن ExtensionPartner يمثِّل اللوحة التي تم إنشاؤها.

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