الوصف
استخدِم واجهة برمجة التطبيقات chrome.devtools.panels
لدمج إضافتك في واجهة مستخدم نافذة "أدوات المطوّرين": يمكنك إنشاء لوحاتك الخاصة والوصول إلى اللوحات الحالية وإضافة أشرطة جانبية.
يتم عرض كل لوحة إضافة وشريط جانبي كصفحة HTML منفصلة. تم عرض جميع صفحات الإضافات
في نافذة "أدوات المطوّرين" لديهم إذن بالوصول إلى جميع أجزاء واجهة برمجة تطبيقات chrome.devtools
، بالإضافة إلى جميع
لواجهات برمجة تطبيقات الإضافات الأخرى.
يمكنك استخدام الطريقة devtools.panels.setOpenResourceHandler
لتثبيت دالة معاودة الاتصال.
تتعامل مع طلبات المستخدمين لفتح مورد (عادةً، النقر على رابط مورد في
نافذة أدوات المطور). على الأكثر يتم استدعاء أحد المعالجات المثبتة؛ يمكن للمستخدمين التحديد (باستخدام
مربع حوار إعدادات أدوات المطورين) إما السلوك الافتراضي أو إضافة للتعامل مع المورد
الطلبات المفتوحة. في حال استدعاء إضافة واحدة إلى setOpenResourceHandler()
عدة مرات، يتم إرسال آخر مرة فقط.
الاحتفاظ بالمعالج.
يمكنك الاطّلاع على ملخص واجهات برمجة التطبيقات في "أدوات مطوّري البرامج" للاطّلاع على مقدمة عامة عن استخدام واجهات برمجة التطبيقات الخاصة بأدوات المطوّرين.
البيان
مثال
يضيف الرمز التالي لوحة مضمّنة في 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");
}
);
توضح لقطة الشاشة التأثير الذي سيحدثه هذا المثال على نافذة "أدوات المطوّرين":
![لوحة رموز الإضافات في شريط أدوات أدوات مطوّري البرامج](https://developer.chrome.com/static/docs/extensions/reference/api/devtools/panels/images/devtools-panels.png?authuser=7&hl=ar)
لتجربة واجهة برمجة التطبيقات هذه، يجب تثبيت مثال على واجهة برمجة التطبيقات للوحات أدوات مطوّري البرامج من chrome-extension-samples. المستودع.
الأنواع
Button
زرّ تُنشئه الإضافة
أماكن إقامة
-
onClicked
الحدث <functionuffful>
يتم إطلاقه عند النقر على الزر.
تبدو دالة
onClicked.addListener
كما يلي:(callback: function) => {...}
-
رد الاتصال
دالة
تظهر المَعلمة
callback
على النحو التالي:() => void
-
-
تحديث
فراغ
يعدِّل سمات الزر. إذا تم حذف بعض الوسيطات أو كانت السمة
null
، لن يتم تعديل السمات المقابلة.تبدو دالة
update
كما يلي:(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
-
iconPath
سلسلة اختيارية
المسار إلى رمز الزر الجديد.
-
tooltipText
سلسلة اختيارية
النص المعروض كتلميح عندما يمرِّر المستخدم مؤشر الماوس فوق الزر
-
غير مفعّلة
قيمة منطقية اختيارية
ما إذا كان الزر غير مفعَّل.
-
ElementsPanel
يمثل لوحة العناصر.
أماكن إقامة
-
onSelectionChanged
الحدث <functionmutuff>
يتم إطلاقه عند اختيار عنصر في اللوحة.
تبدو دالة
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
الحدث <functionmutuff>
يتم تنشيطها عندما ينتقل المستخدم إلى اللوحة.
تبدو دالة
onShown.addListener
كما يلي:(callback: function) => {...}
-
رد الاتصال
دالة
تظهر المَعلمة
callback
على النحو التالي:(window: Window) => void
-
نافذة
نافذة
-
-
-
createStatusBarButton
فراغ
تُستخدَم لإلحاق زر بشريط الحالة في اللوحة.
تبدو دالة
createStatusBarButton
كما يلي:(iconPath: string, tooltipText: string, disabled: boolean) => {...}
-
iconPath
سلسلة
المسار إلى رمز الزر. يجب أن يحتوي الملف على صورة بحجم 64×24 بكسل مؤلفة من رمزين بحجم 32×24. يُستخدم الأيقونة اليسرى عندما يكون الزر غير نشط؛ يظهر الأيقونة اليمنى عند الضغط على الزر.
-
tooltipText
سلسلة
النص المعروض كتلميح عندما يمرِّر المستخدم مؤشر الماوس فوق الزر
-
غير مفعّلة
منطقي
ما إذا كان الزر غير مفعَّل.
-
returns
-
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
الحدث <functionmutuff>
يتم إطلاقه عند اختيار عنصر في اللوحة.
تبدو دالة
onSelectionChanged.addListener
كما يلي:(callback: function) => {...}
-
رد الاتصال
دالة
تظهر المَعلمة
callback
على النحو التالي:() => void
-
-
createSidebarPane
فراغ
تنشئ جزءًا داخل الشريط الجانبي للوحة.
تبدو دالة
createSidebarPane
كما يلي:(title: string, callback?: function) => {...}
-
title
سلسلة
النص المعروض في ترجمة الشريط الجانبي.
-
رد الاتصال
الدالة اختيارية
تظهر المَعلمة
callback
على النحو التالي:(result: ExtensionSidebarPane) => void
-
نتيجة
كائن ExtensionSidebarPane لجزء الشريط الجانبي الذي تم إنشاؤه
-
-
أماكن إقامة
elements
لوحة العناصر.
النوع
sources
لوحة المصادر
النوع
themeName
اسم مظهر اللون الذي تم ضبطه في إعدادات "أدوات مطوري البرامج" للمستخدم القيم المحتملة: 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
-
المصدر
عنصر
devtools.inspectedWindow.Resource
للمورد الذي تم النقر عليه.
-