chrome.devtools.recorder

الوصف

مدى التوفّر

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

نظرة عامة

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.

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

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