chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

الوصف

مدى التوفّر

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

نظرة عامة

devtools.recorder هي ميزة معاينة تتيح لك توسيع لوحة "المسجّل" في "أدوات مطوّري البرامج في Chrome". بدءًا من الإصدار 105 من Chrome، يمكنك توسيع وظيفة التصدير. اعتبارًا من الإصدار 112 من 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