browser.devtools.recorder

תיאור

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

במאמר סיכום של ממשקי DevTools API יש מבוא כללי לשימוש בממשקי Developer Tools API.

זמינות

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

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

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

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

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

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

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

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

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

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

דוגמאות

ייצוא פלאגין

הקוד הבא מטמיע תוסף extension שממיר הקלטה למחרוזת באמצעות JSON.stringify:

class MyPlugin {
  stringify(recording) {
    return Promise.resolve(JSON.stringify(recording));
  }
  stringifyStep(step) {
    return Promise.resolve(JSON.stringify(step));
  }
}

browser.devtools.recorder.registerRecorderExtensionPlugin(
  new MyPlugin(),
  /*name=*/'MyPlugin',
  /*mediaType=*/'application/json'
);

פלאגין הפעלה מחדש

הקוד הבא מטמיע תוסף הרחבה שיוצר תצוגת Recorder פיקטיבית ומציג אותה כשמתקבלת בקשה להפעלה חוזרת:

const view = await browser.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.
  browser.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();
  }
}

browser.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