תיאור
יש להשתמש ב-API של chrome.devtools.recorder
כדי להתאים אישית את החלונית 'מכשיר הקלטה' בכלי הפיתוח.
זמינות
אפשר לעיין בסיכום של ממשקי ה-API למפתחים כדי לקבל מבוא כללי לשימוש בממשקי ה-API של כלים למפתחים.
סקירה כללית
ה-API של devtools.recorder
הוא תכונת תצוגה מקדימה שמאפשרת להרחיב את חלונית ההקלטה בכלי הפיתוח ל-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
לטיפול בהפעלה החוזרת או להשתמש בממשקי API אחרים של התוסף כדי לעבד את בקשת ההפעלה החוזרת. כדי ליצור 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.
סוגים
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
מחרוזת
סוג המדיה של תוכן המחרוזת שהפלאגין מייצר.