דף זה תורגם על ידי Cloud Translation API.

chrome.devtools.recorder

תיאור

כדי להתאים אישית את חלונית מכשיר ההקלטה בכלי הפיתוח, צריך להשתמש ב-API chrome.devtools.recorder.

ה-API של devtools.recorder הוא תכונה של תצוגה מקדימה שמאפשרת להרחיב את חלונית מכשיר ההקלטה בכלי הפיתוח ל-Chrome.

למבוא כללי לשימוש בממשקי API של כלים למפתחים, אפשר לעיין בסיכום ממשקי ה-API של כלי הפיתוח.

זמינות

Chrome 105+

מושגים ושימוש

התאמה אישית של תכונת הייצוא

כדי לרשום פלאגין של תוסף, צריך להשתמש בפונקציה 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

ממשק פלאגין שמופעל בחלונית מכשיר ההקלטה כדי להתאים אישית את החלונית של מכשיר ההקלטה.

מאפיינים

הפעלה מחדש

ריק

Chrome 112 ואילך

מאפשר לתוסף להטמיע פונקציונליות מותאמת אישית של הפעלה מחדש.

הפונקציה replay נראית כך:
```
(recording: object) => {...}
```
- להקליט את
  
  אובייקט
  
  תיעוד האינטראקציה של המשתמש עם הדף. היא צריכה להתאים לסכימת ההקלטה של Puppeteer.
Stringify

ריק

הפונקציה ממירה הקלטה מהפורמט של לוח מכשיר ההקלטה למחרוזת.

הפונקציה stringify נראית כך:
```
(recording: object) => {...}
```
- להקליט את
  
  אובייקט
  
  תיעוד האינטראקציה של המשתמש עם הדף. היא צריכה להתאים לסכימת ההקלטה של Puppeteer.
stringifyStep

ריק

הפונקציה ממירה שלב בהקלטה מפורמט לוח מכשיר ההקלטה למחרוזת.

הפונקציה stringifyStep נראית כך:
```
(step: object) => {...}
```
- שלב
  
  אובייקט
  
  שלב בהקלטת האינטראקציה של משתמש עם הדף. היא צריכה להתאים לסכימת השלבים של Puppeteer.

RecorderView

Chrome 112 ואילך

מייצג תצוגה שנוצרה על ידי תוסף שתוטמע בחלונית מכשיר ההקלטה.

מאפיינים

onHidden

אירוע<functioncancelcancel>

מופעל כשהתצוגה מוסתרת.

הפונקציה onHidden.addListener נראית כך:
```
(callback: function) => {...}
```
- קריאה חוזרת (callback)
  
  פונקציה
  
  הפרמטר callback נראה כך:
```
() => void
```
onShown

אירוע<functionpauseEmpty>

מופעל כשמוצגת תצוגה.

הפונקציה onShown.addListener נראית כך:
```
(callback: function) => {...}
```
- קריאה חוזרת (callback)
  
  פונקציה
  
  הפרמטר callback נראה כך:
```
() => void
```
הצג

ריק

מציין שהתוסף רוצה להציג את התצוגה הזו בחלונית 'מכשיר הקלטה'.

הפונקציה show נראית כך:
```
() => {...}
```

שיטות

createView()

Chrome 112 ואילך

chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

יצירת תצוגה שיכולה לטפל בשידור החוזר. התצוגה הזו תוטמע בחלונית של מכשיר ההקלטה.

פרמטרים

title

מחרוזת

כותרת שמוצגת לצד סמל התוסף בסרגל הכלים של הכלים למפתחים.
pagePath

מחרוזת

הנתיב של דף ה-HTML של הלוח, ביחס לספריית התוספים.

החזרות

RecorderView

registerRecorderExtensionPlugin()

chrome.devtools.recorder.registerRecorderExtensionPlugin(
  plugin: RecorderExtensionPlugin,
  name: string,
  mediaType: string,
)

רושם פלאגין תוסף של מכשיר ההקלטה.

פרמטרים

יישומי פלאגין

RecorderExtensionPlugin

מכונה שמטמיעה את הממשק של RecorderExtensionPlugin.
שם

מחרוזת

שם הפלאגין.
mediaType

מחרוזת

סוג המדיה של תוכן המחרוזת שהפלאגין מפיק.