الوصف
استخدِم واجهة برمجة التطبيقات chrome.devtools.recorder
لتخصيص لوحة "المسجّلة الذكية" في "أدوات مطوري البرامج".
devtools.recorder
API هي ميزة معاينة تتيح لك توسيع لوحة المسجّلة في "أدوات مطوري البرامج في Chrome".
يمكنك الاطّلاع على ملخّص عن واجهات برمجة التطبيقات في أدوات مطوّري البرامج للحصول على مقدمة عامة عن استخدام واجهات برمجة التطبيقات الخاصة بـ "أدوات مطوّري البرامج".
مدى توفّر الخدمة
المفاهيم والاستخدام
تخصيص ميزة التصدير
لتسجيل مكوّن إضافي، استخدِم الدالة registerRecorderExtensionPlugin
. تتطلّب هذه الدالة مثيلاً من المكوّن الإضافي name
وmediaType
كمَعلمتَين. يجب أن يستخدم مثيل المكوّن الإضافي طريقتين: stringify
وstringifyStep
.
يظهر name
الذي توفّره الإضافة في القائمة تصدير في لوحة المسجّلة الذكية.
استنادًا إلى سياق التصدير، عندما ينقر المستخدم على خيار التصدير الذي توفّره الإضافة، تستدعي لوحة المسجّلة الذكية إحدى الدالتَين التاليتَين:
stringify
الذي يتلقى تسجيلاً كاملاً لتدفق المستخدمstringifyStep
الذي يتلقّى خطوة واحدة مسجَّلة
تسمح المَعلمة 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) => {...}
-
تسجيل
كائن
تسجيل لتفاعل المستخدم مع الصفحة. يجب أن يتطابق ذلك مع مخطّط تسجيل Puppeteer.
-
-
تحويل البيانات إلى نص تسلسلي
void
تحوِّل تسجيلاً من تنسيق لوحة "المسجّلة الذكية" إلى سلسلة.
تبدو الدالة
stringify
على النحو التالي:(recording: object) => {...}
-
تسجيل
كائن
تسجيل لتفاعل المستخدم مع الصفحة. يجب أن يتطابق ذلك مع مخطّط تسجيل Puppeteer.
-
-
stringifyStep
void
تحوِّل هذه الخطوة خطوة في التسجيل من تنسيق لوحة "المسجّلة الذكية" إلى سلسلة.
تبدو الدالة
stringifyStep
على النحو التالي:(step: object) => {...}
-
الخطوة
كائن
خطوة لتسجيل تفاعل المستخدم مع الصفحة. يجب أن يتطابق هذا مع مخطط خطوات Puppeteer.
-
RecorderView
تمثّل هذه السمة طريقة عرض تم إنشاؤها من خلال الإضافة ليتم تضمينها في لوحة "المسجّلة الذكية".
أماكن إقامة
-
onHidden
الحدث<functionvitvit>
يتم تنشيطها عندما تكون طريقة العرض مخفية.
تبدو الدالة
onHidden.addListener
على النحو التالي:(callback: function) => {...}
-
معاودة الاتصال
الوظيفة
تبدو معلَمة
callback
على النحو التالي:() => void
-
-
onShown
الحدث<functionvitvit>
يتم تنشيطها عند ظهور العرض.
تبدو الدالة
onShown.addListener
على النحو التالي:(callback: function) => {...}
-
معاودة الاتصال
الوظيفة
تبدو معلَمة
callback
على النحو التالي:() => void
-
-
إظهار
void
تشير هذه القيمة إلى أنّ الإضافة تريد إظهار طريقة العرض هذه في لوحة "المسجّلة الذكية".
تبدو الدالة
show
على النحو التالي:() => {...}
الطُرق
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
تُنشئ طريقة عرض يمكنها معالجة إعادة التشغيل. سيتم تضمين هذا العرض داخل لوحة "المسجّلة الذكية".
المَعلمات
-
title
سلسلة
العنوان المعروض بجانب رمز الإضافة في شريط أدوات "أدوات المطوّرين"
-
pagePath
سلسلة
مسار صفحة HTML الخاصة باللوحة ذات الصلة بدليل الإضافة.
المرتجعات
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
لتسجيل المكوّن الإضافي لإضافة "المسجّلة الذكية".
المَعلمات
-
plugin
مثيل ينفّذ واجهة RecorderExtensionPlugin.
-
اسم
سلسلة
تمثّل هذه السمة اسم المكوّن الإضافي.
-
mediaType
سلسلة
نوع الوسائط لمحتوى السلسلة الذي ينتجه المكوِّن الإضافي.