chrome.devtools.recorder

תאריך הרענון: 2026-09-25 robots: noindex

תיאור

זמינות

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

סקירה כללית

‫devtools.recorder API הוא תכונת טרום-השקה שמאפשרת להרחיב את החלונית Recorder בכלי הפיתוח ל-Chrome. החל מ-Chrome M105, אפשר להרחיב את פונקציית הייצוא. החל מגרסה Chrome M112, אפשר להרחיב את לחצן ההפעלה מחדש.

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

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

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

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

• ‫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.

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

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