تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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
    
    كائن 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
  
  سلسلة
  
  النص المعروض كتلميح عندما يمرِّر المستخدم مؤشر الماوس فوق الزر
- غير مفعّلة
  
  منطقي
  
  ما إذا كان الزر غير مفعَّل.
- returns
  Button

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
    
    كائن 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
  
  كائن 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
```
- المصدر
  
  المورد
  
  عنصر devtools.inspectedWindow.Resource للمورد الذي تم النقر عليه.