chrome.devtools.recorder

תיאור

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

במאמר סיכום של ממשקי DevTools API יש מבוא כללי לשימוש בממשקי API של כלים למפתחים.

זמינות

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

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

כדי לרשום תוסף של הרחבה, משתמשים בפונקציה registerRecorderExtensionPlugin. הפונקציה הזו דורשת מופע של פלאגין, name ו-mediaType כפרמטרים. מופע הפלאגין צריך להטמיע שתי שיטות: stringify ו-stringifyStep.

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

בהתאם להקשר של הייצוא, כשהמשתמש לוחץ על אפשרות הייצוא שמופיעה בתוסף, החלונית Recorder מפעילה אחת משתי הפונקציות:

• stringify שמקבל תיעוד מלא של מסלול המשתמש
• stringifyStep שמקבלת שלב מוקלט יחיד

הפרמטר mediaType מאפשר לתוסף לציין את סוג הפלט שהוא יוצר באמצעות הפונקציות stringify ו-stringifyStep. לדוגמה, application/javascript אם התוצאה היא תוכנית JavaScript.

התאמה אישית של לחצן ההפעלה החוזרת

כדי להתאים אישית את לחצן ההפעלה מחדש במכשיר ההקלטה, משתמשים בפונקציה registerRecorderExtensionPlugin. כדי שההתאמה האישית תפעל, צריך להטמיע בפלאגין את השיטה replay. אם השיטה מזוהה, מופיע לחצן הפעלה חוזרת בכלי ההקלטה. כשלוחצים על הכפתור, אובייקט ההקלטה הנוכחי מועבר כארגומנט הראשון לשיטה replay.

בשלב הזה, התוסף יכול להציג RecorderView כדי לטפל בהפעלה מחדש או להשתמש בממשקי API אחרים של התוסף כדי לעבד את בקשת ההפעלה מחדש. כדי ליצור RecorderView חדש, מפעילים את chrome.devtools.recorder.createView.

דוגמאות

Export plugin

הקוד הבא מטמיע תוסף הרחבה שממיר הקלטה למחרוזת באמצעות 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