chrome.devtools.recorder

الوصف

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

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

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

مدى توفّر الخدمة

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

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

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

لتسجيل مكوّن إضافي، استخدِم الدالة 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

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

أماكن إقامة

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

    void

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

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

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

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

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

    void

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

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

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

  • stringifyStep

    void

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

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

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

    • الخطوة

      كائن

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

RecorderView

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

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

أماكن إقامة

  • onHidden

    الحدث<functionvitvit>

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

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

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

    • معاودة الاتصال

      الوظيفة

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

      ()=>void

  • onShown

    الحدث<functionvitvit>

    يتم تنشيطها عند ظهور العرض.

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

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

    • معاودة الاتصال

      الوظيفة

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

      ()=>void

  • إظهار

    void

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

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

    ()=> {...}

الطُرق

createView()

Chrome 112 والإصدارات الأحدث 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

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

المَعلمات

  • title

    سلسلة

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

  • pagePath

    سلسلة

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

المرتجعات

registerRecorderExtensionPlugin()

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

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

المَعلمات

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

  • اسم

    سلسلة

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

  • mediaType

    سلسلة

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