chrome.devtools.panels

توضیحات

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

آشکار

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

"devtools_page"

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

نمای کلی

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

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

نمونه ها

کد زیر پانل موجود در 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 نشان می دهد:

برای امتحان این 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 برای منبعی که روی آن کلیک شده است.