chrome.devtools.recorder

الوصف

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

devtools.recorder واجهة برمجة التطبيقات هي ميزة معاينة تتيح لك توسيع لوحة "أداة Recorder" في "أدوات مطوري البرامج في Chrome".

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

مدى التوفّر

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

اعتبارًا من Chrome 105، يمكنك توسيع وظيفة التصدير. واعتبارًا من Chrome 112، يمكنك توسيع زر "إعادة التشغيل".

المفاهيم والاستخدام

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

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

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

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

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

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

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

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

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

أمثلة

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

ينفّذ الرمز البرمجي التالي مكوّنًا إضافيًا يحوّل التسجيل إلى سلسلة باستخدام 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'
);

مكوّن إضافي لإعادة التشغيل

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

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

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

الخصائص

• replay

  void

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

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

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

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

  • recording

    عنصر

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

• stringify

  void

  يحوّل التسجيل من تنسيق لوحة "أداة Recorder" إلى سلسلة.

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

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

  • recording

    عنصر

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

• stringifyStep

  void

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

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

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

  • step

    عنصر

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

RecorderView

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

يمثّل طريقة عرض أنشأتها الإضافة ليتم تضمينها داخل لوحة "أداة Recorder".

الخصائص

• onHidden

  Event<functionvoidvoid>

  يتم تنشيط هذا الحدث عند إخفاء طريقة العرض.

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

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

  • callback

    دالة

    تبدو المَعلمة callback على النحو التالي:

    () => void

• onShown

  Event<functionvoidvoid>

  يتم تنشيط هذا الحدث عند عرض طريقة العرض.

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

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

  • callback

    دالة

    تبدو المَعلمة callback على النحو التالي:

    () => void

• show

  void

  يشير إلى أنّ الإضافة تريد عرض طريقة العرض هذه في لوحة "أداة Recorder".

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

  () => {...}

الطُرق

createView()

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

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

ينشئ طريقة عرض يمكنها التعامل مع عملية إعادة التشغيل. سيتم تضمين طريقة العرض هذه داخل لوحة "أداة Recorder".

المعلمات

• title

  سلسلة

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

• pagePath

  سلسلة

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

المرتجعات

• RecorderView

registerRecorderExtensionPlugin()

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

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

المعلمات

• plugin

  RecorderExtensionPlugin

  مثيل ينفّذ واجهة RecorderExtensionPlugin.

• name

  سلسلة

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

• mediaType

  سلسلة

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