chrome.devtools.panels

الوصف

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

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

يمكنك استخدام طريقة 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");
  }
);

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

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

لتجربة واجهة برمجة التطبيقات هذه، يُرجى تثبيت مثال devtools Panels API من مستودع chrome-extension-models.

الأنواع

Button

زر تم إنشاؤه بواسطة الإضافة.

أماكن إقامة

• onClicked

  الحدث<functionvitvit>

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

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

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

  • معاودة الاتصال

    الوظيفة

    تبدو معلَمة callback على النحو التالي:

    ()=>void

• تحديث

  void

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

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

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

  • iconPath

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

    المسار إلى الأيقونة الجديدة للزر.

  • tooltipText

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

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

  • غير مفعّلة

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

    ما إذا كان الزر معطلاً.

ElementsPanel

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

أماكن إقامة

• onSelectionChanged

  الحدث<functionvitvit>

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

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

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

  • معاودة الاتصال

    الوظيفة

    تبدو معلَمة callback على النحو التالي:

    ()=>void

• createSidebarPane

  void

  لإنشاء لوحة داخل الشريط الجانبي لللوحة.

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

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

  • title

    سلسلة

    النص الذي يتم عرضه في شرح الشريط الجانبي.

  • معاودة الاتصال

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

    تبدو معلَمة callback على النحو التالي:

    (result: ExtensionSidebarPane)=>void

    • نتيجة

      ExtensionSidebarPane

      كائن ExtensionSidebarPane للوحة الشريط الجانبي التي تم إنشاؤها.

ExtensionPanel

يمثّل هذا الخيار لوحة تم إنشاؤها من خلال إضافة.

أماكن إقامة

• onHidden

  الحدث<functionvitvit>

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

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

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

  • معاودة الاتصال

    الوظيفة

    تبدو معلَمة callback على النحو التالي:

    ()=>void

• onSearch

  الحدث<functionvitvit>

  يتم اتّخاذه بناءً على إجراء بحث (سيتم في هذه الحالة إلغاء عملية بحث جديدة أو التنقّل في نتائج البحث أو إلغاء عملية بحث).

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

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

  • معاودة الاتصال

    الوظيفة

    تبدو معلَمة callback على النحو التالي:

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

    • إجراء

      سلسلة

    • queryString

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

• onShown

  الحدث<functionvitvit>

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

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

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

  • معاودة الاتصال

    الوظيفة

    تبدو معلَمة callback على النحو التالي:

    (window: Window)=>void

    • نافذة

      نافذة

• createStatusBarButton

  void

  لإلحاق زر بشريط الحالة في اللوحة.

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

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

  • iconPath

    سلسلة

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

  • tooltipText

    سلسلة

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

  • غير مفعّلة

    boolean

    ما إذا كان الزر معطلاً.

  • returns

    Button

ExtensionSidebarPane

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

أماكن إقامة

• onHidden

  الحدث<functionvitvit>

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

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

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

  • معاودة الاتصال

    الوظيفة

    تبدو معلَمة callback على النحو التالي:

    ()=>void

• onShown

  الحدث<functionvitvit>

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

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

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

  • معاودة الاتصال

    الوظيفة

    تبدو معلَمة callback على النحو التالي:

    (window: Window)=>void

    • نافذة

      نافذة

• setExpression

  void

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

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

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

  • تعبير

    سلسلة

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

  • rootTitle

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

    تمثّل هذه السمة عنوان اختياري لجذر شجرة التعبير.

  • معاودة الاتصال

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

    تبدو معلَمة callback على النحو التالي:

    ()=>void

• setHeight

  void

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

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

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

  • الطول

    سلسلة

    مواصفات حجم تشبه CSS، مثل '100px' أو '12ex'

• setObject

  void

  لضبط كائن متوافق مع JSON لعرضه في جزء الشريط الجانبي.

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

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

  • jsonObject

    سلسلة

    تمثّل هذه السمة كائنًا سيتم عرضه في سياق الصفحة التي تم فحصها. ويتم تقييمه في سياق المتصل (عميل واجهة برمجة التطبيقات).

  • rootTitle

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

    تمثّل هذه السمة عنوان اختياري لجذر شجرة التعبير.

  • معاودة الاتصال

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

    تبدو معلَمة callback على النحو التالي:

    ()=>void

• setPage

  void

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

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

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

  • المسار

    سلسلة

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

SourcesPanel

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

أماكن إقامة

• onSelectionChanged

  الحدث<functionvitvit>

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

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

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

  • معاودة الاتصال

    الوظيفة

    تبدو معلَمة callback على النحو التالي:

    ()=>void

• createSidebarPane

  void

  لإنشاء لوحة داخل الشريط الجانبي لللوحة.

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

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

  • title

    سلسلة

    النص الذي يتم عرضه في شرح الشريط الجانبي.

  • معاودة الاتصال

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

    تبدو معلَمة callback على النحو التالي:

    (result: ExtensionSidebarPane)=>void

    • نتيجة

      ExtensionSidebarPane

      كائن ExtensionSidebarPane للوحة الشريط الجانبي التي تم إنشاؤها.

أماكن إقامة

elements

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

النوع

ElementsPanel

sources

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

النوع

SourcesPanel

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

  • لوحة

    ExtensionPanel

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

openResource()

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

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

المَعلمات

• url

  سلسلة

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

• lineNumber

  الرقم

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

• columnNumber

  الرقم اختياري

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

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

• معاودة الاتصال

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

  تبدو معلَمة callback على النحو التالي:

  ()=>void

setOpenResourceHandler()

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

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

المَعلمات

• معاودة الاتصال

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

  تبدو معلَمة callback على النحو التالي:

  (resource: Resource)=>void

  • المصدر

    المورد

    كائن devtools.inspectedWindow.Resource للمورد الذي تم النقر عليه.