chrome.devtools.recorder

תיאור

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

זמינות

Chrome 105+

למבוא כללי לשימוש בממשקי 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

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

מאפיינים

• הפעלה מחדש

  ריק

  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

  אירוע<functioncancelcancel>

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

  הפונקציה 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

  מחרוזת

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