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.

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

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