chrome.devtools.panels

شرح

از chrome.devtools.panels API برای ادغام برنامه افزودنی خود در رابط کاربری پنجره Developer Tools استفاده کنید: پانل های خود را ایجاد کنید، به پانل های موجود دسترسی داشته باشید و نوارهای جانبی اضافه کنید.

هر پانل افزونه و نوار کناری به عنوان یک صفحه HTML جداگانه نمایش داده می شود. همه صفحات افزونه نمایش داده شده در پنجره Developer Tools به همه ماژول ها در chrome.devtools API و همچنین به chrome.extension API دسترسی دارند. سایر APIهای برنامه افزودنی برای صفحات موجود در پنجره Developer Tools در دسترس نیستند، اما می‌توانید با ارسال درخواستی به صفحه پس‌زمینه برنامه افزودنی خود، آنها را فراخوانی کنید، مشابه نحوه انجام آن در اسکریپت‌های محتوا .

می‌توانید از روش devtools.panels.setOpenResourceHandler برای نصب یک تابع تماس که درخواست‌های کاربر برای باز کردن یک منبع را مدیریت می‌کند، استفاده کنید (معمولاً با کلیک روی پیوند منبع در پنجره ابزارهای توسعه‌دهنده). حداکثر یکی از کنترل کننده های نصب شده فراخوانی می شود. کاربران می توانند (با استفاده از گفتگوی تنظیمات ابزار توسعه دهنده) رفتار پیش فرض یا یک برنامه افزودنی را برای رسیدگی به درخواست های باز منبع تعیین کنند. اگر یک برنامه افزودنی چندین بار setOpenResourceHandler() را فراخوانی کند، تنها آخرین کنترلر حفظ می شود.

برای آشنایی کلی با استفاده از Developer Tools APIs به خلاصه DevTools APIs مراجعه کنید.

آشکار

برای استفاده از این API باید کلیدهای زیر در مانیفست اعلان شوند.

"devtools_page"

مثال

کد زیر پانل موجود در Panel.html را اضافه می کند که توسط FontPicker.png در نوار ابزار Developer Tools نشان داده شده و با عنوان Font Picker برچسب گذاری شده است:

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");
  }
);

اسکرین شات تاثیری که این مثال روی پنجره Developer Tools می گذارد را نشان می دهد:

پانل نماد برنامه افزودنی در نوار ابزار DevTools.

برای امتحان این API، نمونه API panels devtools را از مخزن chrome-extension-samples نصب کنید.

انواع

Button

دکمه ای که توسط افزونه ایجاد شده است.

خواص

• روی کلیک کرد

  رویداد<functionvoidvoid>

  هنگامی که دکمه کلیک می شود شلیک می شود.

  تابع onClicked.addListener به نظر می رسد:

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

  • پاسخ به تماس

    تابع

    پارامتر callback به نظر می رسد:

    ()=>void

• به روز رسانی

  خالی

  ویژگی های دکمه را به روز می کند. اگر برخی از آرگومان ها حذف یا null شوند، ویژگی های مربوطه به روز نمی شوند.

  تابع update به نظر می رسد:

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

  • iconPath

    رشته اختیاری

    مسیر به نماد جدید دکمه.

  • tooltipText

    رشته اختیاری

    وقتی کاربر ماوس را روی دکمه می‌گذارد، متن به‌عنوان یک راهنمای ابزار نشان داده می‌شود.

  • معلول

    بولی اختیاری

    اینکه آیا دکمه غیرفعال است.

ElementsPanel

نمایانگر پنل Elements است.

خواص

• onSelectionChanged

  رویداد<functionvoidvoid>

  هنگامی که یک شی در پانل انتخاب می شود شلیک می شود.

  تابع onSelectionChanged.addListener به نظر می رسد:

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

  • پاسخ به تماس

    تابع

    پارامتر callback به نظر می رسد:

    ()=>void

• ایجاد سایدبارپان

  خالی

  یک صفحه در نوار کناری پانل ایجاد می کند.

  تابع createSidebarPane به نظر می رسد:

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

  • عنوان

    رشته

    متنی که در عنوان نوار کناری نمایش داده می شود.

  • پاسخ به تماس

    عملکرد اختیاری

    پارامتر callback به نظر می رسد:

    (result: ExtensionSidebarPane)=>void

    • نتیجه

      ExtensionSidebarPane

      یک شی ExtensionSidebarPane برای پنجره نوار کناری ایجاد شده.

ExtensionPanel

نشان دهنده یک پنل ایجاد شده توسط پسوند است.

خواص

• در پنهان

  رویداد<functionvoidvoid>

  هنگامی که کاربر از پنل دور می شود، شلیک می شود.

  تابع onHidden.addListener به نظر می رسد:

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

  • پاسخ به تماس

    تابع

    پارامتر callback به نظر می رسد:

    ()=>void

• در جستجو

  رویداد<functionvoidvoid>

  بر اساس یک اقدام جستجو (شروع جستجوی جدید، پیمایش نتایج جستجو، یا لغو جستجو) انجام می شود.

  تابع onSearch.addListener به نظر می رسد:

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

  • پاسخ به تماس

    تابع

    پارامتر callback به نظر می رسد:

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

    • عمل

      رشته

    • queryString

      رشته اختیاری

• در نشان داده شده است

  رویداد<functionvoidvoid>

  هنگامی که کاربر به پنل تغییر می کند، فعال می شود.

  تابع onShown.addListener به نظر می رسد:

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

  • پاسخ به تماس

    تابع

    پارامتر callback به نظر می رسد:

    (window: Window)=>void

    • پنجره

      پنجره

• createStatusBarButton

  خالی

  دکمه ای را به نوار وضعیت پانل اضافه می کند.

  تابع createStatusBarButton به نظر می رسد:

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

  • iconPath

    رشته

    مسیر به نماد دکمه. فایل باید دارای یک تصویر 64x24 پیکسلی متشکل از دو نماد 32x24 باشد. نماد سمت چپ زمانی استفاده می شود که دکمه غیر فعال باشد. با فشار دادن دکمه، نماد سمت راست نمایش داده می شود.

  • tooltipText

    رشته

    وقتی کاربر ماوس را روی دکمه می‌گذارد، متن به‌عنوان یک راهنمای ابزار نشان داده می‌شود.

  • معلول

    بولی

    اینکه آیا دکمه غیرفعال است.

  • برمی گرداند

    دکمه

ExtensionSidebarPane

نوار کناری ایجاد شده توسط افزونه.

خواص

• در پنهان

  رویداد<functionvoidvoid>

  زمانی فعال می شود که در نتیجه دور شدن کاربر از پانلی که میزبان صفحه نوار کناری است، صفحه نوار کناری پنهان می شود.

  تابع onHidden.addListener به نظر می رسد:

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

  • پاسخ به تماس

    تابع

    پارامتر callback به نظر می رسد:

    ()=>void

• در نشان داده شده است

  رویداد<functionvoidvoid>

  زمانی فعال می شود که در نتیجه تغییر کاربر به پانل میزبان، صفحه نوار کناری قابل مشاهده می شود.

  تابع onShown.addListener به نظر می رسد:

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

  • پاسخ به تماس

    تابع

    پارامتر callback به نظر می رسد:

    (window: Window)=>void

    • پنجره

      پنجره

• setExpression

  خالی

  عبارتی را تنظیم می کند که در صفحه بازرسی شده ارزیابی می شود. نتیجه در نوار کناری نمایش داده می شود.

  تابع setExpression به نظر می رسد:

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

  • اصطلاح

    رشته

    عبارتی که باید در زمینه صفحه بازرسی شده ارزیابی شود. اشیاء جاوا اسکریپت و گره های DOM در یک درخت قابل گسترش مشابه کنسول/ساعت نمایش داده می شوند.

  • rootTitle

    رشته اختیاری

    عنوان اختیاری برای ریشه درخت بیان.

  • پاسخ به تماس

    عملکرد اختیاری

    پارامتر callback به نظر می رسد:

    ()=>void

• تنظیم ارتفاع

  خالی

  ارتفاع نوار کناری را تنظیم می کند.

  تابع setHeight به نظر می رسد:

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

  • ارتفاع

    رشته

    مشخصات اندازه مانند CSS، مانند '100px' یا '12ex' .

• setObject

  خالی

  یک شی منطبق با JSON را تنظیم می کند تا در صفحه نوار کناری نمایش داده شود.

  تابع setObject به نظر می رسد:

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

  • jsonObject

    رشته

    شیئی که در متن صفحه بازرسی شده نمایش داده می شود. در زمینه تماس گیرنده (کلاینت API) ارزیابی می شود.

  • rootTitle

    رشته اختیاری

    عنوان اختیاری برای ریشه درخت بیان.

  • پاسخ به تماس

    عملکرد اختیاری

    پارامتر callback به نظر می رسد:

    ()=>void

• setPage

  خالی

  یک صفحه HTML را تنظیم می کند تا در صفحه نوار کناری نمایش داده شود.

  تابع setPage به نظر می رسد:

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

  • مسیر

    رشته

    مسیر نسبی یک صفحه افزونه برای نمایش در نوار کناری.

SourcesPanel

نمایانگر پنل منابع است.

خواص

• onSelectionChanged

  رویداد<functionvoidvoid>

  هنگامی که یک شی در پانل انتخاب می شود شلیک می شود.

  تابع onSelectionChanged.addListener به نظر می رسد:

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

  • پاسخ به تماس

    تابع

    پارامتر callback به نظر می رسد:

    ()=>void

• ایجاد سایدبارپان

  خالی

  یک صفحه در نوار کناری پانل ایجاد می کند.

  تابع createSidebarPane به نظر می رسد:

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

  • عنوان

    رشته

    متنی که در عنوان نوار کناری نمایش داده می شود.

  • پاسخ به تماس

    عملکرد اختیاری

    پارامتر callback به نظر می رسد:

    (result: ExtensionSidebarPane)=>void

    • نتیجه

      ExtensionSidebarPane

      یک شی ExtensionSidebarPane برای پنجره نوار کناری ایجاد شده.

خواص

elements

پنل عناصر

تایپ کنید

عناصر پنل

sources

پنل منابع

تایپ کنید

SourcesPanel

themeName

Chrome 59+

نام تم رنگی که در تنظیمات DevTools کاربر تنظیم شده است. مقادیر ممکن: default (پیش‌فرض) و dark .

تایپ کنید

رشته

مواد و روش ها

create()

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
)

یک پنل افزونه ایجاد می کند.

مولفه های

• عنوان

  رشته

  عنوانی که در کنار نماد برنامه افزودنی در نوار ابزار Developer Tools نمایش داده می شود.

• iconPath

  رشته

  مسیر نماد پانل نسبت به فهرست برنامه افزودنی.

• pagePath

  رشته

  مسیر صفحه HTML پانل نسبت به فهرست برنامه افزودنی.

• پاسخ به تماس

  عملکرد اختیاری

  پارامتر callback به نظر می رسد:

  (panel: ExtensionPanel)=>void

  • پانل

    ExtensionPanel

    یک شی ExtensionPanel که نمایانگر پانل ایجاد شده است.

openResource()

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

از DevTools درخواست می‌کند تا یک URL را در پانل ابزارهای برنامه‌نویس باز کند.

مولفه های

• آدرس اینترنتی

  رشته

  URL منبعی که باید باز شود.

• شماره خط

  عدد

  شماره خطی را مشخص می کند که هنگام بارگیری منبع به آن بروید.

• شماره ستون

  شماره اختیاری

  Chrome 114+

  شماره ستونی را مشخص می‌کند که هنگام بارگیری منبع باید به آن بروید.

• پاسخ به تماس

  عملکرد اختیاری

  پارامتر callback به نظر می رسد:

  ()=>void

setOpenResourceHandler()

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

وقتی کاربر روی پیوند منبع در پنجره Developer Tools کلیک می کند، تابعی را مشخص می کند که فراخوانی شود. برای حذف تنظیم کننده، یا متد بدون پارامتر را فراخوانی کنید یا null را به عنوان پارامتر ارسال کنید.

مولفه های

• پاسخ به تماس

  عملکرد اختیاری

  پارامتر callback به نظر می رسد:

  (resource: Resource)=>void

  • منبع

    منبع

    یک شی devtools.inspectedWindow.Resource برای منبعی که روی آن کلیک شده است.