شرح
از میانای برنامه‌سازی کاربردی chrome.devtools.panels برای ادغام افزونه‌تان در میانای کاربر پنجره «ابزارهای توسعه‌دهندگان» استفاده کنید: پانل‌های خودتان را ایجاد کنید، به پانل‌های موجود دسترسی پیدا کنید، و نوارهای کناری اضافه کنید.
هر پانل افزونه و نوار کناری به‌عنوان یک صفحه HTML جداگانه نمایش داده می‌شود. همه صفحه‌های افزونه که در پنجره «ابزارهای توسعه‌دهنده» نمایش داده می‌شوند به همه بخش‌های chrome.devtools API و همچنین همه APIهای افزونه دیگر دسترسی دارند.
می‌توانید از روش devtools.panels.setOpenResourceHandler برای نصب تابع بازخوانی استفاده کنید
که درخواست‌های کاربر برای باز کردن منبع را مدیریت می‌کند (معمولاً، کلیک کردن روی پیوند منبع در
پنجره «ابزارهای توسعه‌دهندگان»). حداکثر یکی از گرداننده‌های نصب‌شده فراخوانی می‌شود؛ کاربران می‌توانند (بااستفاده از
کادر گفتگوی «تنظیمات ابزارهای توسعه‌دهنده») رفتار پیش‌فرض یا افزونه‌ای را برای رسیدگی به درخواست‌های باز کردن
منابع مشخص کنند. اگر افزونه‌ای چندین‌بار setOpenResourceHandler() را فراخوانی کند، فقط آخرین
گرداننده حفظ می‌شود.
برای آشنایی کلی با نحوه استفاده از میاناهای برنامه‌سازی کاربردی «ابزارهای توسعه‌دهندگان»، به خلاصه میاناهای برنامه‌سازی کاربردی DevTools مراجعه کنید.
مانیفست
برای استفاده از این میانای برنامه‌سازی کاربردی، کلیدهای زیر باید در مانیفست اعلام شوند.
"devtools_page"مثال
کد زیر پانلی را اضافه می‌کند که در Panel.html قرار دارد و با FontPicker.png در نوارابزار «ابزارهای توسعه‌دهندگان» نشان داده می‌شود و برچسب انتخاب‌گر قلم دارد:
chrome.devtools.panels.create("Font Picker",
"FontPicker.png",
"Panel.html",
function(panel) { ... });
کد زیر یک قاب نوار کناری را که در Sidebar.html قرار دارد و عنوان آن Font Properties است به
پانل Elements اضافه می‌کند، سپس ارتفاع آن را روی 8ex تنظیم می‌کند:
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
}
);
این نماگرفت تأثیری را که این مثال بر پنجره «ابزارهای توسعه‌دهندگان» می‌گذارد نشان می‌دهد:
برای امتحان کردن این API، نمونه API پانل‌های devtools را از مخزن chrome-extension-samples نصب کنید.
انواع
Button
دکمه‌ای که افزونه ایجاد کرده است.
مشخصات
-
onClicked
Event<functionvoidvoid>
وقتی روی دکمه کلیک می‌شود، فعال می‌شود.
تابع
onClicked.addListenerبه‌صورت زیر است:(callback: function) => {...}
-
تماس برگشتی
عملکرد
پارامتر
callbackبه‌صورت زیر است:() => void
-
-
به‌روز کردن
باطل کردن
مشخصه‌های دکمه را به‌روز می‌کند. اگر برخی‌از آرگومان‌ها حذف شده باشند یا
nullباشند، مشخصه‌های مربوطه به‌روز نمی‌شوند.تابع
updateبه‌صورت زیر است:(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
-
iconPath
رشته اختیاری
مسیر نماد جدید دکمه.
-
tooltipText
رشته اختیاری
نوشتاری که وقتی کاربر موشواره را روی دکمه نگه می‌دارد، به‌عنوان نکته‌ابزار نشان داده می‌شود.
-
غیرفعال
بولی اختیاری
آیا دکمه غیرفعال است.
-
ElementsPanel
پانل «عناصر» را نشان می‌دهد.
مشخصات
-
onSelectionChanged
Event<functionvoidvoid>
وقتی شیئی در پانل انتخاب شود، فعال می‌شود.
تابع
onSelectionChanged.addListenerبه‌صورت زیر است:(callback: function) => {...}
-
تماس برگشتی
عملکرد
پارامتر
callbackبه‌صورت زیر است:() => void
-
-
createSidebarPane
باطل کردن
قاب جدیدی در نوار کناری پانل ایجاد می‌کند.
تابع
createSidebarPaneبه‌صورت زیر است:(title: string) => {...}
-
عنوان
رشته
نوشتاری که در زیرنویس نوار کناری نمایش داده می‌شود.
-
returns
Promise<ExtensionSidebarPane>
Chrome نسخه ۱۵۲ و بالاتروقتی نوار کناری ایجاد می‌شود، یک فراخوانی برگشتی فراخوانده می‌شود.
-
ExtensionPanel
نشان‌دهنده پانلی است که توسط افزونه ایجاد شده است.
مشخصات
-
onHidden
Event<functionvoidvoid>
وقتی کاربر از پانل خارج می‌شود، فعال می‌شود.
تابع
onHidden.addListenerبه‌صورت زیر است:(callback: function) => {...}
-
تماس برگشتی
عملکرد
پارامتر
callbackبه‌صورت زیر است:() => void
-
-
onSearch
Event<functionvoidvoid>
هنگام کنش جستجو (شروع جستجوی جدید، پیمایش نتیجه جستجو، یا لغو جستجو) فعال می‌شود.
تابع
onSearch.addListenerبه‌صورت زیر است:(callback: function) => {...}
-
تماس برگشتی
عملکرد
پارامتر
callbackبه‌صورت زیر است:(action: string, queryString?: string) => void
-
کنش
رشته
-
queryString
رشته اختیاری
-
-
-
onShown
Event<functionvoidvoid>
وقتی کاربر به پانل می‌رود، فعال می‌شود.
تابع
onShown.addListenerبه‌صورت زیر است:(callback: function) => {...}
-
تماس برگشتی
عملکرد
پارامتر
callbackبه‌صورت زیر است:(window: Window) => void
-
پنجره
پنجره
-
-
-
createStatusBarButton
باطل کردن
دکمه‌ای به نوار وضعیت پانل اضافه می‌کند.
تابع
createStatusBarButtonبه‌صورت زیر است:(iconPath: string, tooltipText: string, disabled: boolean) => {...}
-
iconPath
رشته
مسیر نماد دکمه. فایل باید حاوی تصویری با ابعاد ۶۴×۲۴ پیکسل باشد که از دو نماد ۳۲×۲۴ تشکیل شده است. نماد سمت چپ زمانی استفاده می‌شود که دکمه غیرفعال باشد؛ نماد سمت راست زمانی نمایش داده می‌شود که دکمه فشار داده شود.
-
tooltipText
رشته
نوشتاری که وقتی کاربر موشواره را روی دکمه نگه می‌دارد، به‌عنوان نکته‌ابزار نشان داده می‌شود.
-
غیرفعال
بولی
آیا دکمه غیرفعال است.
-
returns
-
-
نمایش
باطل کردن
Chrome نسخه ۱۴۰ و بالاتر browser.* از Chrome نسخه ۱۵۲پانل را با فعال کردن زبانه مربوطه نشان می‌دهد.
تابع
showبه‌صورت زیر است:() => {...}
ExtensionSidebarPane
نوار کناری ایجادشده توسط افزونه.
مشخصات
-
onHidden
Event<functionvoidvoid>
وقتی پانل نوار کناری درنتیجه تغییر دادن پانل میزبان پانل نوار کناری توسط کاربر پنهان می‌شود، فعال می‌شود.
تابع
onHidden.addListenerبه‌صورت زیر است:(callback: function) => {...}
-
تماس برگشتی
عملکرد
پارامتر
callbackبه‌صورت زیر است:() => void
-
-
onShown
Event<functionvoidvoid>
وقتی قاب نوار کناری درنتیجه جابه‌جایی کاربر به پانلی که میزبان آن است نمایان می‌شود، فعال می‌شود.
تابع
onShown.addListenerبه‌صورت زیر است:(callback: function) => {...}
-
تماس برگشتی
عملکرد
پارامتر
callbackبه‌صورت زیر است:(window: Window) => void
-
پنجره
پنجره
-
-
-
setExpression
باطل کردن
عبارتی را تنظیم می‌کند که در صفحه بازرسی‌شده ارزیابی می‌شود. نتیجه در قاب نوار کناری نمایش داده می‌شود.
تابع
setExpressionبه‌صورت زیر است:(expression: string, rootTitle?: string) => {...}
-
عبارت
رشته
عبارتی که باید در بافتار صفحه بازرسی‌شده ارزیابی شود. اهداف جاوا اسکریپت و گره‌های DOM در درختی قابل‌گسترش مشابه کنسول/ساعت نمایش داده می‌شوند.
-
rootTitle
رشته اختیاری
عنوان اختیاری برای ریشه درخت عبارت.
-
returns
Promise<void>
Chrome نسخه ۱۵۲ و بالاترفراخوانی برگشتی که پس‌از به‌روزرسانی قاب نوار کناری با نتایج ارزیابی عبارت فراخوانی می‌شود.
-
-
setHeight
باطل کردن
ارتفاع نوار کناری را تنظیم می‌کند.
تابع
setHeightبه‌صورت زیر است:(height: string) => {...}
-
ارتفاع
رشته
مشخصات اندازه شبیه CSS، مانند
'100px'یا'12ex'.
-
-
setObject
باطل کردن
شیء سازگار با JSON را برای نمایش در قاب نوار کناری تنظیم می‌کند.
تابع
setObjectبه‌صورت زیر است:(jsonObject: string, rootTitle?: string) => {...}
-
jsonObject
رشته
شیئی که باید در بافتار صفحه بازرسی‌شده نمایش داده شود. در بافت فراخواننده (کارخواه میانای برنامه‌سازی کاربردی) ارزیابی می‌شود.
-
rootTitle
رشته اختیاری
عنوان اختیاری برای ریشه درخت عبارت.
-
returns
Promise<void>
Chrome نسخه ۱۵۲ و بالاترفراخوانیای که پس‌از به‌روزرسانی نوار کناری با شیء فراخوانده می‌شود.
-
-
setPage
باطل کردن
صفحه HTML را برای نمایش در قاب نوار کناری تنظیم می‌کند.
تابع
setPageبه‌صورت زیر است:(path: string) => {...}
-
مسیر
رشته
مسیر نسبی صفحه افزونه برای نمایش در نوار کناری.
-
SourcesPanel
پانل «منابع» را نشان می‌دهد.
مشخصات
-
onSelectionChanged
Event<functionvoidvoid>
وقتی شیئی در پانل انتخاب شود، فعال می‌شود.
تابع
onSelectionChanged.addListenerبه‌صورت زیر است:(callback: function) => {...}
-
تماس برگشتی
عملکرد
پارامتر
callbackبه‌صورت زیر است:() => void
-
-
createSidebarPane
باطل کردن
قاب جدیدی در نوار کناری پانل ایجاد می‌کند.
تابع
createSidebarPaneبه‌صورت زیر است:(title: string) => {...}
-
عنوان
رشته
نوشتاری که در زیرنویس نوار کناری نمایش داده می‌شود.
-
returns
Promise<ExtensionSidebarPane>
Chrome نسخه ۱۵۲ و بالاتروقتی نوار کناری ایجاد می‌شود، یک فراخوانی برگشتی فراخوانده می‌شود.
-
Theme
زمینه مورداستفاده DevTools.
شمارشی
«پیش‌فرض»
زمینه پیش‌فرض DevTools. این همیشه زمینه روشن است.
«تیره»
زمینه تیره.
مشخصات
elements
پانل «عناصر».
نوع
sources
پانل منابع.
نوع
themeName
نام زمینه رنگی تنظیم‌شده در تنظیمات DevTools کاربر. مقادیر ممکن: default (پیش‌فرض) و dark.
نوع
رشته
روش‌ها
create()
browser.devtools.panels.create(
title: string,
iconPath: string,
pagePath: string,
): Promise<ExtensionPanel>
پانل افزونه ایجاد می‌کند.
پارامترها
-
عنوان
رشته
عنوانی که در کنار نماد افزونه در نوارابزار «ابزارهای توسعه‌دهندگان» نمایش داده می‌شود.
-
iconPath
رشته
مسیر نماد پانل نسبت‌به دایرکتوری افزونه.
-
pagePath
رشته
مسیر صفحه HTML پانل نسبت به دایرکتوری افزونه.
بازگشتی‌ها
-
Promise<ExtensionPanel>
Chrome نسخه ۱۵۲ و بالاترتابعی که هنگام ایجاد پانل فراخوانی می‌شود.
openResource()
browser.devtools.panels.openResource(
url: string,
lineNumber: number,
columnNumber?: number,
): Promise<void>
از DevTools درخواست می‌کند نشانی وب را در پانل «ابزارهای توسعه‌دهندگان» باز کند.
پارامترها
-
نشانی وب
رشته
نشانی وب منبعی که باید باز شود.
-
lineNumber
شماره
شماره خطی را که هنگام بار شدن منبع باید به آن پیمایش شود مشخص می‌کند.
-
columnNumber
شماره اختیاری
Chrome نسخه ۱۱۴ و بالاتر browser.* از Chrome نسخه ۱۵۲شماره ستونی را که هنگام بار شدن منبع باید به آن پیمایش شود مشخص می‌کند.
بازگشتی‌ها
-
Promise<void>
Chrome نسخه ۱۵۲ و بالاترتابعی که وقتی منبع باموفقیت بار شده است فراخوانی می‌شود.
setOpenResourceHandler()
browser.devtools.panels.setOpenResourceHandler(
callback?: function,
): void
عملکردی را که باید هنگام کلیک کردن کاربر روی پیوند منبع در پنجره «ابزارهای توسعه‌دهنده» فراخوانی شود مشخص می‌کند. برای لغو تنظیم کنترل‌کننده، یا روش را بدون پارامتر فراخوانی کنید یا null را به‌عنوان پارامتر ارسال کنید.
پارامترها
-
تماس برگشتی
تابع اختیاری
پارامتر
callbackبه‌صورت زیر است:(resource: Resource, lineNumber: number) => void
-
منبع
شیء
devtools.inspectedWindow.Resourceبرای منبعی که روی آن کلیک شده است. -
lineNumber
شماره
شماره خط را در منبعی که روی آن کلیک شده است مشخص می‌کند.
-
setThemeChangeHandler()
browser.devtools.panels.setThemeChangeHandler(
callback?: function,
): void
تابعی را که باید هنگام تغییر طرح زمینه فعلی در DevTools فراخوانی شود مشخص می‌کند. برای لغو تنظیم کنترل‌کننده، یا روش را بدون پارامتر فراخوانی کنید یا null را به‌عنوان پارامتر ارسال کنید.