الوصف
استخدِم واجهة برمجة تطبيقات chrome.devtools.panels
لدمج إضافتك في واجهة مستخدم نافذة "أدوات المطوّرين" من خلال إنشاء لوحاتك الخاصة والوصول إلى اللوحات الحالية وإضافة أشرطة جانبية.
البيان
يجب الإعلان عن المفاتيح التالية في ملف البيان كي تتمكّن من استخدام واجهة برمجة التطبيقات هذه.
"devtools_page"
يمكنك الاطّلاع على ملخّص عن واجهات برمجة التطبيقات في أدوات مطوّري البرامج للحصول على مقدمة عامة عن استخدام واجهات برمجة التطبيقات الخاصة بـ "أدوات مطوّري البرامج".
نظرة عامة
يتم عرض كل لوحة إضافة وشريط جانبي كصفحة HTML منفصلة. تتمكن كل صفحات الإضافات المعروضة في نافذة "أدوات المطوّرين" من الوصول إلى جميع الوحدات في chrome.devtools
API، وكذلك إلى واجهة برمجة التطبيقات chrome.extension. ولا تتوفر واجهات برمجة التطبيقات الأخرى للإضافات في الصفحات ضمن نافذة "أدوات المطوّرين"، ولكن يمكنك استدعاؤها من خلال إرسال طلب إلى صفحة الخلفية الخاصة بإضافتك، على غرار الطريقة التي يتم بها تنفيذ ذلك في النصوص البرمجية للمحتوى.
يمكنك استخدام طريقة 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");
}
);
توضح لقطة الشاشة هذه التأثير الذي سيحدثه الأمثلة أعلاه على نافذة أدوات المطوّرين:
لتجربة واجهة برمجة التطبيقات هذه، يُرجى تثبيت مثال 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 للوحة الشريط الجانبي التي تم إنشاؤها.
-
-
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
-
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 للوحة الشريط الجانبي التي تم إنشاؤها.
-
-
أماكن إقامة
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
-
لوحة
كائن 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
للمورد الذي تم النقر عليه.
-