chrome.devtools.recorder

الوصف

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

مدى التوفّر

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

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

نظرة عامة

devtools.recorder API هي ميزة معاينة تتيح لك توسيع لوحة "المسجّلة الذكية" في "أدوات مطوري البرامج في 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.

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

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

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

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

أماكن إقامة

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

  فراغ

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

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

  تبدو دالة replay كما يلي:

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

  • تسجيل

    كائن

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

• تحويل النص إلى سلسلة

  فراغ

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

  تبدو دالة stringify كما يلي:

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

  • تسجيل

    كائن

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

• stringifyStep

  فراغ

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

  تبدو دالة stringifyStep كما يلي:

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

  • خطوة

    كائن

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

RecorderView

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

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

أماكن إقامة

• onHidden

  الحدث <functionuffful>

  يتم الإطلاق عند إخفاء العرض.

  تبدو دالة onHidden.addListener كما يلي:

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

  • رد الاتصال

    دالة

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

    () => void

• onShown

  الحدث <functionuffful>

  يتم الإطلاق عند إظهار العرض.

  تبدو دالة onShown.addListener كما يلي:

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

  • رد الاتصال

    دالة

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

    () => void

• إظهار

  فراغ

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

  تبدو دالة show كما يلي:

  () => {...}

الطُرق

createView()

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

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

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

المعلمات

• title

  سلسلة

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

• pagePath

  سلسلة

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

المرتجعات

• RecorderView

registerRecorderExtensionPlugin()

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

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

المعلمات

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

  RecorderExtensionPlugin

  مثيل ينفذ واجهة RecorderExtensionAccessin

• الاسم

  سلسلة

  تمثّل هذه السمة اسم المكوِّن الإضافي.

• mediaType

  سلسلة

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