chrome.devtools.recorder

الوصف

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

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

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

مدى التوفّر

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

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

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

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

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

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

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

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

لتخصيص زر إعادة التشغيل في المسجّلة الذكية، استخدِم الوظيفة registerRecorderExtensionPlugin. ويجب أن ينفِّذ المكوّن الإضافي طريقة replay لكي يتم تطبيق التخصيص. إذا تم رصد الطريقة، سيظهر زر إعادة التشغيل في المسجّلة الذكية. بعد النقر على الزر، سيتم تمرير كائن التسجيل الحالي كوسيطة أولى إلى طريقة 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'
);

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

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

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 في اللوحة بالنسبة إلى دليل الإضافات.

المرتجعات

registerRecorderExtensionPlugin()

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

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

المعلمات

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

    RecorderExtensionPlugin

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

  • الاسم

    سلسلة

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

  • mediaType

    سلسلة

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