chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

الوصف

استخدِم واجهة برمجة التطبيقات chrome.devtools.recorder لتخصيص لوحة "المسجّلة الذكية" في "أدوات مطوّري البرامج".

مدى التوفّر

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

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

نظرة عامة

واجهة برمجة التطبيقات devtools.recorder هي ميزة مسبقة تتيح لك توسيع نطاق لوحة "المسجِّل" في "أدوات مطوّري البرامج في Chrome". اعتبارًا من الإصدار M105 من Chrome، يمكنك توسيع وظيفة التصدير. بدءًا من الإصدار M112 من Chrome، يمكنك توسيع زر إعادة التشغيل.

تخصيص ميزة التصدير

لتسجيل مكوّن إضافي، استخدِم الدالة registerRecorderExtensionPlugin. تتطلّب هذه الدالة مثيل مكوّن إضافي وname وmediaType كمَعلمات. يجب أن ينفّذ مثيل المكوّن الإضافي طريقتَين: stringify وstringifyStep.

يظهر name الذي توفّره الإضافة في قائمة تصدير في لوحة المسجِّل.

بناءً على سياق التصدير، عندما ينقر المستخدم على خيار التصدير الذي توفّره الإضافة، تستدعي لوحة المسجِّل إحدى الدالتَين التاليتَين:

• stringify يتلقّى تسجيلاً كاملاً لمسار المستخدم
• stringifyStep يتلقّى خطوة واحدة مسجَّلة

تسمح المَعلمة mediaType للإضافة بتحديد نوع الناتج الذي تنشئه باستخدام الدالتَين stringify وstringifyStep. على سبيل المثال، application/javascript إذا كانت النتيجة برنامج JavaScript.

مثال على مكوّن إضافي للتصدير

ينفّذ الرمز التالي مكوّنًا إضافيًا يحوّل التسجيل إلى سلسلة باستخدام JSON.stringify:

class MyPlugin {
  stringify(recording) {
    return Promise.resolve(JSON.stringify(recording));
  }
  stringifyStep(step) {
    return Promise.resolve(JSON.stringify(step));
  }
}

chrome.devtools.recorder.registerRecorderExtensionPlugin(
  new MyPlugin(),
  /*name=*/'MyPlugin',
  /*mediaType=*/'application/json'
);

تخصيص زر إعادة التشغيل

لتخصيص زر إعادة التشغيل في المسجِّل، استخدِم الدالة registerRecorderExtensionPlugin. يجب أن ينفّذ المكوّن الإضافي طريقة replay لكي يصبح التخصيص ساريًا. إذا تم رصد الطريقة، سيظهر زر إعادة التشغيل في المسجِّل. عند النقر على الزر، سيتم تمرير عنصر التسجيل الحالي كوسيطة أولى إلى طريقة replay.

في هذه المرحلة، يمكن للإضافة عرض RecorderView لمعالجة إعادة التشغيل أو استخدام واجهات برمجة تطبيقات أخرى للإضافة من أجل معالجة طلب إعادة التشغيل. لإنشاء RecorderView جديد، يُرجى تفعيل chrome.devtools.recorder.createView.

مثال على المكوّن الإضافي Replay

ينفّذ الرمز التالي مكوّنًا إضافيًا للإضافة ينشئ عرضًا وهميًا لـ "المسجّلة الذكية" ويعرضه عند طلب إعادة التشغيل:

const view = await chrome.devtools.recorder.createView(
  /* name= */ 'ExtensionName',
  /* pagePath= */ 'Replay.html'
);

let latestRecording;

view.onShown.addListener(() => {
  // Recorder has shown the view. Send additional data to the view if needed.
  chrome.runtime.sendMessage(JSON.stringify(latestRecording));
});

view.onHidden.addListener(() => {
  // Recorder has hidden the view.
});

export class RecorderPlugin {
  replay(recording) {
    // Share the data with the view.
    latestRecording = recording;
    // Request to show the view.
    view.show();
  }
}

chrome.devtools.recorder.registerRecorderExtensionPlugin(
  new RecorderPlugin(),
  /* name=*/ 'CoffeeTest'
);

يمكنك العثور على مثال كامل للإضافة على GitHub.

الأنواع

RecorderExtensionPlugin

واجهة مكوّن إضافي تستدعيها لوحة "المسجّلة الذكية" لتخصيص لوحة "المسجّلة الذكية".

الخصائص

• إعادة التشغيل

  void

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

  يسمح هذا الإذن للإضافة بتنفيذ وظيفة إعادة تشغيل مخصّصة.

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

  (recording: object) => {...}

  • تسجيل

    عنصر

    تسجيل لتفاعل المستخدم مع الصفحة يجب أن يتطابق هذا مع مخطط تسجيل Puppeteer.

• stringify

  void

  تحوّل هذه الطريقة تسجيلاً من تنسيق لوحة "المسجِّل" إلى سلسلة.

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

  (recording: object) => {...}

  • تسجيل

    عنصر

    تسجيل لتفاعل المستخدم مع الصفحة يجب أن يتطابق هذا مع مخطط تسجيل Puppeteer.

• stringifyStep

  void

  لتحويل خطوة من التسجيل من تنسيق لوحة "المسجّلة" إلى سلسلة

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

  (step: object) => {...}

  • بخطوة

    عنصر

    خطوة من تسجيل تفاعل المستخدم مع الصفحة يجب أن يتطابق ذلك مع مخطط خطوات Puppeteer.

RecorderView

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

تمثّل هذه السمة طريقة عرض تم إنشاؤها بواسطة الإضافة ليتم تضمينها داخل لوحة "المسجِّل".

الخصائص

• onHidden

  Event<functionvoidvoid>

  يتم تنشيطه عندما تكون طريقة العرض مخفية.

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

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

  • callback

    دالة

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

    () => void

• onShown

  Event<functionvoidvoid>

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

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

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

  • callback

    دالة

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

    () => void

• إظهار

  void

  يشير ذلك إلى أنّ الإضافة تريد عرض هذه الصفحة في لوحة "المسجِّل".

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

  () => {...}

الطُرق

createView()

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

chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
): RecorderView

لإنشاء عرض يمكنه التعامل مع إعادة التشغيل. سيتم تضمين طريقة العرض هذه داخل لوحة "المسجِّل".

المعلمات

• title

  سلسلة

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

• pagePath

  سلسلة

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

المرتجعات

• RecorderView

registerRecorderExtensionPlugin()

chrome.devtools.recorder.registerRecorderExtensionPlugin(
  plugin: RecorderExtensionPlugin,
  name: string,
  mediaType: string,
): void

لتسجيل مكوّن إضافي لـ "إضافة Recorder".

المعلمات

• مكوّن إضافي

  RecorderExtensionPlugin

  يشير ذلك إلى مثيل ينفّذ واجهة RecorderExtensionPlugin.

• الاسم

  سلسلة

  اسم المكوّن الإضافي

• mediaType

  سلسلة

  نوع الوسائط لمحتوى السلسلة الذي ينتجه المكوّن الإضافي.