chrome.devtools.recorder

תיאור

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

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

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

זמינות

Chrome מגרסה 105 ואילך

החל מגרסה 105 של Chrome, אפשר להרחיב את פונקציונליות הייצוא. החל מגרסה 112 של Chrome, אפשר להרחיב את לחצן ההפעלה החוזרת.

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

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

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

Chrome 112 ומעלה

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

תכונות

• onHidden

  אירוע<functionvoidvoid>

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

  הפונקציה onHidden.addListener נראית כך:

  (callback: function)=> {...}

  • קריאה חוזרת (callback)

    פונקציה

    הפרמטר callback נראה כך:

    ()=>void

• onShown

  אירוע<functionvoidvoid>

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

  הפונקציה onShown.addListener נראית כך:

  (callback: function)=> {...}

  • קריאה חוזרת (callback)

    פונקציה

    הפרמטר callback נראה כך:

    ()=>void

• הצגה

  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,
)

רושם פלאגין של תוסף Recorder.

פרמטרים

• plugin

  RecorderExtensionPlugin

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

• name

  מחרוזת

  שם הפלאגין.

• mediaType

  מחרוזת

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