תיאור
יש להשתמש ב-API של chrome.devtools.recorder
כדי להתאים אישית את החלונית 'מכשיר הקלטה' בכלי הפיתוח.
ה-API של devtools.recorder
הוא תכונת תצוגה מקדימה שמאפשרת להרחיב את חלונית ההקלטה בכלי הפיתוח ל-Chrome.
אפשר לעיין בסיכום של ממשקי ה-API למפתחים כדי לקבל מבוא כללי לשימוש בממשקי ה-API של כלים למפתחים.
זמינות
מושגים ושימוש
התאמה אישית של תכונת הייצוא
כדי לרשום פלאגין של תוסף, יש להשתמש בפונקציה registerRecorderExtensionPlugin
. הפונקציה הזו דורשת מופע של פלאגין, name
ו-mediaType
כפרמטרים. מופע הפלאגין חייב ליישם שתי שיטות: stringify
ו-stringifyStep
.
הערך name
שסופק על ידי התוסף מופיע בתפריט ייצוא בחלונית מכשיר ההקלטה.
בהתאם להקשר, כשהמשתמש לוחץ על אפשרות הייצוא שהתוסף סיפק, החלונית מכשיר ההקלטה מפעילה אחת משתי הפונקציות:
stringify
שמקבל תיעוד מלא של תהליך המשתמשstringifyStep
שמקבל שלב מוקלט אחד
הפרמטר mediaType
מאפשר לתוסף לציין את סוג הפלט שהוא יוצר באמצעות הפונקציות stringify
ו-stringifyStep
. לדוגמה, application/javascript
אם התוצאה היא תוכנית JavaScript.
התאמה אישית של לחצן ההפעלה החוזרת
כדי להתאים אישית את לחצן ההפעלה החוזרת במכשיר ההקלטה, יש להשתמש בפונקציה registerRecorderExtensionPlugin
. כדי שההתאמה האישית תיכנס לתוקף, הפלאגין חייב להטמיע את השיטה replay
.
אם השיטה תזוהה, יופיע לחצן הפעלה חוזרת במכשיר ההקלטה.
לאחר לחיצה על הלחצן, אובייקט ההקלטה הנוכחי יועבר כארגומנט הראשון לשיטה replay
.
בשלב זה, התוסף יכול להציג RecorderView
לטיפול בהפעלה החוזרת או להשתמש בממשקי API אחרים של התוסף כדי לעבד את בקשת ההפעלה החוזרת. כדי ליצור 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.
-
-
Stringify
void
ממירה הקלטה מהפורמט של הלוח של מכשיר ההקלטה למחרוזת.
הפונקציה
stringify
נראית כך:(recording: object) => {...}
-
להקליט את
אובייקט
הקלטה של האינטראקציה של המשתמש עם הדף. היא צריכה להתאים לסכימת ההקלטה של ה-Puppeteer.
-
-
stringifyStep
void
ממירה שלב בהקלטה מהפורמט של הלוח של מכשיר ההקלטה למחרוזת.
הפונקציה
stringifyStep
נראית כך:(step: object) => {...}
-
שלב
אובייקט
שלב בתיעוד של אינטראקציה של משתמש עם הדף. היא צריכה להתאים לסכימת השלב של הבובה (Puppeteer).
-
RecorderView
מייצג תצוגה שנוצרה באמצעות תוסף להטמעה בחלונית מכשיר ההקלטה.
תכונות
-
onHidden
אירוע<functionvoidvoid>
מופעל כשהתצוגה מוסתרת.
הפונקציה
onHidden.addListener
נראית כך:(callback: function) => {...}
-
קריאה חוזרת (callback)
פונקציה
הפרמטר
callback
נראה כך:() => void
-
-
onShown
אירוע<functionvoidvoid>
מופעל כשהתצוגה מוצגת.
הפונקציה
onShown.addListener
נראית כך:(callback: function) => {...}
-
קריאה חוזרת (callback)
פונקציה
הפרמטר
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,
)
רושם פלאגין של תוסף Recorder.
פרמטרים
-
plugin
מכונה שמטמיעה את הממשק RecorderExtensionPlugin.
-
name
מחרוזת
שם הפלאגין.
-
mediaType
מחרוזת
סוג המדיה של תוכן המחרוזת שהפלאגין מייצר.