browser.devtools.recorder

الوصف

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

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

مدى التوفّر

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

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

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

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

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

• stringify التي تتلقّى تسجيلاً كاملاً لمسار المستخدم
• stringifyStep الذي يتلقّى خطوة واحدة مسجّلة

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

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

لتخصيص زر إعادة التشغيل في المسجّلة الذكية، استخدِم الدالة registerRecorderExtensionPlugin. يجب أن تنفّذ الإضافة طريقة replay لكي يصبح التخصيص ساريًا. في حال تم رصد الطريقة، سيظهر زر إعادة التشغيل في المسجّل. عند النقر على الزر، سيتم تمرير عنصر التسجيل الحالي كمعلَمة أولى إلى الطريقة replay.

في هذه المرحلة، يمكن للإضافة عرض RecorderView للتعامل مع إعادة التشغيل أو استخدام واجهات برمجة تطبيقات أخرى خاصة بالإضافات لمعالجة طلب إعادة التشغيل. لإنشاء RecorderView جديد، استدعِ browser.devtools.recorder.createView.

أمثلة

إضافة التصدير

ينفّذ الرمز التالي إضافة تعمل على تحويل التسجيل إلى سلسلة باستخدام JSON.stringify:

class MyPlugin {
  stringify(recording) {
    return Promise.resolve(JSON.stringify(recording));
  }
  stringifyStep(step) {
    return Promise.resolve(JSON.stringify(step));
  }
}

browser.devtools.recorder.registerRecorderExtensionPlugin(
  new MyPlugin(),
  /*name=*/'MyPlugin',
  /*mediaType=*/'application/json'
);

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

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

const view = await browser.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.
  browser.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();
  }
}

browser.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