chrome.devtools.panels

refresh date: 2026-09-25 robots: noindex

الوصف

استخدِم واجهة برمجة التطبيقات chrome.devtools.panels لدمج الإضافة في واجهة مستخدم نافذة "أدوات المطوّرين": أنشئ لوحاتك الخاصة، وافتح اللوحات الحالية، وأضِف أشرطة جانبية.

البيان

يجب الإعلان عن المفاتيح التالية في ملف البيان لاستخدام واجهة برمجة التطبيقات هذه.

"devtools_page"

يمكنك الاطّلاع على ملخّص واجهات برمجة التطبيقات في "أدوات مطوّري البرامج" للحصول على مقدمة عامة حول استخدام واجهات برمجة التطبيقات في "أدوات مطوّري البرامج".

نظرة عامة

يتم عرض كل لوحة وشريط جانبي للإضافة كصفحة HTML منفصلة. يمكن لجميع صفحات الإضافات المعروضة في نافذة "أدوات المطوّرين" الوصول إلى جميع الوحدات في واجهة برمجة التطبيقات chrome.devtools، بالإضافة إلى واجهة برمجة التطبيقات 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");
  }
);

توضّح لقطة الشاشة هذه التأثير الذي ستحدثه الأمثلة أعلاه في نافذة "أدوات المطوّرين":

لوحة رمز الإضافة في شريط أدوات "أدوات مطوري البرامج"

لتجربة واجهة برمجة التطبيقات هذه، ثبِّت مثال واجهة برمجة التطبيقات للوحات أدوات مطوّري البرامج من مستودع chrome-extension-samples.

الأنواع

Button

زر أنشأته الإضافة

الخصائص

  • onClicked

    Event<functionvoidvoid>

    يتم تنشيطه عند النقر على الزر.

    تبدو الدالة onClicked.addListener على النحو التالي: 

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

    • callback

      دالة

      تظهر المَعلمة callback على النحو التالي: 

      () => void

  • تحديث

    void

    لتعديل سمات الزر إذا تم حذف بعض الوسيطات أو كانت قيمتها null، لن يتم تعديل السمات المقابلة.

    تبدو الدالة update على النحو التالي: 

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

    • iconPath

      string اختياري

      المسار إلى الرمز الجديد للزر

    • tooltipText

      string اختياري

      النص الذي يظهر كتلميح عندما يمرّر المستخدم مؤشر الماوس فوق الزر

    • غير مفعّلة

      قيمة منطقية اختيارية

      ما إذا كان الزر غير مفعَّل

ElementsPanel

تمثّل لوحة "العناصر".

الخصائص

  • onSelectionChanged

    Event<functionvoidvoid>

    يتم تنشيطه عند اختيار عنصر في اللوحة.

    تبدو الدالة onSelectionChanged.addListener على النحو التالي: 

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

    • callback

      دالة

      تظهر المَعلمة callback على النحو التالي: 

      () => void

  • createSidebarPane

    void

    Promise

    يتيح هذا الإذن إنشاء لوحة ضمن الشريط الجانبي للوحة.

    تبدو الدالة createSidebarPane على النحو التالي: 

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

    • title

      سلسلة

      النص الذي يتم عرضه في شرح الشريط الجانبي.

    • callback

      function اختياري

      تظهر المَعلمة callback على النحو التالي: 

      (result: ExtensionSidebarPane) => void

      • عنصر ExtensionSidebarPane للوحة الشريط الجانبي التي تم إنشاؤها

    • returns

      Promise<ExtensionSidebarPane>

      الإصدار 152 من Chrome والإصدارات الأحدث

      دالة ردّ اتصال يتم استدعاؤها عند إنشاء الشريط الجانبي

      لا تتوفّر الوعود إلا في الإصدار Manifest V3 والإصدارات الأحدث، وتحتاج المنصات الأخرى إلى استخدام عمليات الاستدعاء.

ExtensionPanel

تمثّل لوحة تم إنشاؤها بواسطة إضافة.

الخصائص

  • onHidden

    Event<functionvoidvoid>

    يتم تنشيطه عندما ينتقل المستخدم بعيدًا عن اللوحة.

    تبدو الدالة onHidden.addListener على النحو التالي: 

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

    • callback

      دالة

      تظهر المَعلمة callback على النحو التالي: 

      () => void

  • onSearch

    Event<functionvoidvoid>

    يتم تنشيطه عند تنفيذ إجراء بحث (بدء بحث جديد أو التنقّل في نتائج البحث أو إلغاء البحث).

    تبدو الدالة onSearch.addListener على النحو التالي: 

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

    • callback

      دالة

      تظهر المَعلمة callback على النحو التالي: 

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

      • إجراء

        سلسلة

      • queryString

        string اختياري

  • onShown

    Event<functionvoidvoid>

    يتم تنشيطه عندما ينتقل المستخدم إلى اللوحة.

    تبدو الدالة onShown.addListener على النحو التالي: 

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

    • callback

      دالة

      تظهر المَعلمة callback على النحو التالي: 

      (window: Window) => void

      • نافذة

        نافذة

  • createStatusBarButton

    void

    تُستخدَم لإلحاق زر بشريط الحالة في اللوحة.

    تبدو الدالة createStatusBarButton على النحو التالي: 

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

    • iconPath

      سلسلة

      المسار إلى رمز الزر يجب أن يحتوي الملف على صورة بحجم 64×24 بكسل تتألف من رمزَين بحجم 32×24. يُستخدم الرمز الأيمن عندما يكون الزر غير نشط، ويظهر الرمز الأيسر عند الضغط على الزر.

    • tooltipText

      سلسلة

      النص الذي يظهر كتلميح عندما يمرّر المستخدم مؤشر الماوس فوق الزر

    • غير مفعّلة

      قيمة منطقية

      ما إذا كان الزر غير مفعَّل

  • إظهار

    void

    الإصدار 140 من Chrome والإصدارات الأحدث

    لعرض اللوحة من خلال تفعيل علامة التبويب المقابلة

    تبدو الدالة show على النحو التالي: 

    () => {...}

ExtensionSidebarPane

شريط جانبي أنشأته الإضافة

الخصائص

  • onHidden

    Event<functionvoidvoid>

    يتم تنشيط هذا الحدث عندما تصبح لوحة الشريط الجانبي مخفية نتيجة انتقال المستخدم بعيدًا عن اللوحة التي تستضيف لوحة الشريط الجانبي.

    تبدو الدالة onHidden.addListener على النحو التالي: 

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

    • callback

      دالة

      تظهر المَعلمة callback على النحو التالي: 

      () => void

  • onShown

    Event<functionvoidvoid>

    يتم تنشيط هذا الحدث عندما تصبح لوحة الشريط الجانبي مرئية نتيجة تبديل المستخدم إلى اللوحة التي تستضيفها.

    تبدو الدالة onShown.addListener على النحو التالي: 

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

    • callback

      دالة

      تظهر المَعلمة callback على النحو التالي: 

      (window: Window) => void

      • نافذة

        نافذة

  • setExpression

    void

    Promise

    يضبط تعبيرًا يتم تقييمه ضمن الصفحة التي يتم فحصها. يتم عرض النتيجة في لوحة الشريط الجانبي.

    تبدو الدالة setExpression على النحو التالي: 

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

    • تعبير

      سلسلة

      تعبير يتم تقييمه في سياق الصفحة التي يتم فحصها يتم عرض كائنات JavaScript وعُقَد DOM في شجرة قابلة للتوسيع مشابهة لوحدة التحكّم/المراقبة.

    • rootTitle

      string اختياري

      عنوان اختياري لجذر شجرة التعبير.

    • callback

      function اختياري

      تظهر المَعلمة callback على النحو التالي: 

      () => void

    • returns

      وعد<فراغ>

      الإصدار 152 من Chrome والإصدارات الأحدث

      عملية استدعاء يتم تنفيذها بعد تعديل لوحة الشريط الجانبي باستخدام نتائج تقييم التعبير

      لا تتوفّر الوعود إلا في الإصدار Manifest V3 والإصدارات الأحدث، وتحتاج المنصات الأخرى إلى استخدام عمليات الاستدعاء.

  • setHeight

    void

    لضبط ارتفاع الشريط الجانبي

    تبدو الدالة setHeight على النحو التالي: 

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

    • الارتفاع

      سلسلة

      مواصفات حجم تشبه CSS، مثل '100px' أو '12ex'.

  • setObject

    void

    Promise

    يضبط هذا الإجراء عنصرًا متوافقًا مع JSON ليتم عرضه في لوحة الشريط الجانبي.

    تبدو الدالة setObject على النحو التالي: 

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

    • jsonObject

      سلسلة

      عنصر يتم عرضه في سياق الصفحة التي يتم فحصها يتم تقييمها في سياق المتصل (عميل واجهة برمجة التطبيقات).

    • rootTitle

      string اختياري

      عنوان اختياري لجذر شجرة التعبير.

    • callback

      function اختياري

      تظهر المَعلمة callback على النحو التالي: 

      () => void

    • returns

      وعد<فراغ>

      الإصدار 152 من Chrome والإصدارات الأحدث

      ردّ اتصال يتم استدعاؤه بعد تعديل الشريط الجانبي باستخدام العنصر.

      لا تتوفّر الوعود إلا في الإصدار Manifest V3 والإصدارات الأحدث، وتحتاج المنصات الأخرى إلى استخدام عمليات الاستدعاء.

  • setPage

    void

    تحدِّد هذه السياسة صفحة HTML ليتم عرضها في لوحة الشريط الجانبي.

    تبدو الدالة setPage على النحو التالي: 

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

    • المسار

      سلسلة

      المسار النسبي لصفحة الإضافة التي سيتم عرضها في الشريط الجانبي

SourcesPanel

تمثّل لوحة "المصادر".

الخصائص

  • onSelectionChanged

    Event<functionvoidvoid>

    يتم تنشيطه عند اختيار عنصر في اللوحة.

    تبدو الدالة onSelectionChanged.addListener على النحو التالي: 

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

    • callback

      دالة

      تظهر المَعلمة callback على النحو التالي: 

      () => void

  • createSidebarPane

    void

    Promise

    يتيح هذا الإذن إنشاء لوحة ضمن الشريط الجانبي للوحة.

    تبدو الدالة createSidebarPane على النحو التالي: 

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

    • title

      سلسلة

      النص الذي يتم عرضه في شرح الشريط الجانبي.

    • callback

      function اختياري

      تظهر المَعلمة callback على النحو التالي: 

      (result: ExtensionSidebarPane) => void

      • عنصر ExtensionSidebarPane للوحة الشريط الجانبي التي تم إنشاؤها

    • returns

      Promise<ExtensionSidebarPane>

      الإصدار 152 من Chrome والإصدارات الأحدث

      دالة ردّ اتصال يتم استدعاؤها عند إنشاء الشريط الجانبي

      لا تتوفّر الوعود إلا في الإصدار Manifest V3 والإصدارات الأحدث، وتحتاج المنصات الأخرى إلى استخدام عمليات الاستدعاء.

Theme

الإصدار 99 من Chrome أو الإصدارات الأحدث

المظهر الذي تستخدمه "أدوات مطوّري البرامج"

Enum

‫"default"
مظهر "أدوات مطوّري البرامج" التلقائي ويكون هذا دائمًا المظهر الفاتح.

"dark"
المظهر الداكن

الخصائص

elements

لوحة "العناصر"

النوع

ElementsPanel

sources

لوحة المصادر

النوع

SourcesPanel

themeName

الإصدار 59 من Chrome أو الإصدارات الأحدث

اسم نسق الألوان الذي تم ضبطه في إعدادات "أدوات مطوّري البرامج" لدى المستخدم القيم المحتمَلة: default (القيمة التلقائية) وdark.

النوع

سلسلة

الطُرق

create()

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

لإنشاء لوحة إضافة

المعلمات

  • title

    سلسلة

    العنوان الذي يظهر بجانب رمز الإضافة في شريط أدوات "أدوات المطوّرين".

  • iconPath

    سلسلة

    مسار رمز اللوحة بالنسبة إلى دليل الإضافة

  • pagePath

    سلسلة

    مسار صفحة HTML الخاصة باللوحة بالنسبة إلى دليل الإضافة

  • callback

    function اختياري

    تظهر المَعلمة callback على النحو التالي: 

    (panel: ExtensionPanel) => void

    • لوحة

      ExtensionPanel

      عنصر ExtensionPanel يمثّل اللوحة التي تم إنشاؤها

المرتجعات

  • الإصدار 152 من Chrome والإصدارات الأحدث

    دالة يتم استدعاؤها عند إنشاء اللوحة

    لا تتوفّر الوعود إلا في الإصدار Manifest V3 والإصدارات الأحدث، وتحتاج المنصات الأخرى إلى استخدام عمليات الاستدعاء.

openResource()

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

يطلب من "أدوات مطوّري البرامج" فتح عنوان URL في لوحة "أدوات المطوّرين".

المعلمات

  • url

    سلسلة

    عنوان URL للمرجع المطلوب فتحه

  • lineNumber

    الرقم

    يحدّد رقم السطر الذي يجب الانتقال إليه عند تحميل المورد.

  • columnNumber

    number اختيارية

    الإصدار 114 من Chrome والإصدارات الأحدث

    يحدّد رقم العمود الذي يتم الانتقال إليه عند تحميل المورد.

  • callback

    function اختياري

    تظهر المَعلمة callback على النحو التالي: 

    () => void

المرتجعات

  • وعد<فراغ>

    الإصدار 152 من Chrome والإصدارات الأحدث

    دالة يتم استدعاؤها عند تحميل المورد بنجاح.

    لا تتوفّر الوعود إلا في الإصدار Manifest V3 والإصدارات الأحدث، وتحتاج المنصات الأخرى إلى استخدام عمليات الاستدعاء.

setOpenResourceHandler()

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

يحدّد هذا الإعداد الدالة التي يتم استدعاؤها عندما ينقر المستخدم على رابط مورد في نافذة "أدوات المطوّرين". لإلغاء ضبط المعالج، يمكنك استدعاء الطريقة بدون مَعلمات أو تمرير قيمة فارغة كمَعلمة.

المعلمات

  • callback

    function اختياري

    تظهر المَعلمة callback على النحو التالي: 

    (resource: Resource, lineNumber: number) => void

    • المصدر

      المرجع

      عنصر devtools.inspectedWindow.Resource للمورد الذي تم النقر عليه.

    • lineNumber

      الرقم

      تحدّد هذه السمة رقم السطر ضمن المورد الذي تم النقر عليه.

setThemeChangeHandler()

الإصدار 99 من Chrome أو الإصدارات الأحدث 
chrome.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

تحدّد هذه السمة الدالة التي سيتم استدعاؤها عند تغيير المظهر الحالي في "أدوات مطوّري البرامج". لإلغاء ضبط المعالج، يمكنك استدعاء الطريقة بدون معلَمات أو تمرير null كمعلَمة.

المعلمات

  • callback

    function اختياري

    تظهر المَعلمة callback على النحو التالي: 

    (theme: Theme) => void

    • مظهر

      المظهر

      المظهر الحالي في "أدوات مطوري البرامج"