chrome.devtools.recorder

תיאור

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

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

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

זמינות

Chrome 105+

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

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

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

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

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

הפרמטר 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

ממשק פלאגין שמופעל בחלונית מכשיר ההקלטה כדי להתאים אישית את החלונית של מכשיר ההקלטה.

מאפיינים

  • הפעלה מחדש

    ריק

    Chrome 112 ואילך

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

    הפונקציה replay נראית כך:

    (recording: object) => {...}

  • Stringify

    ריק

    הפונקציה ממירה הקלטה מהפורמט של לוח מכשיר ההקלטה למחרוזת.

    הפונקציה stringify נראית כך:

    (recording: object) => {...}

  • stringifyStep

    ריק

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

    הפונקציה stringifyStep נראית כך:

    (step: object) => {...}

RecorderView

Chrome 112 ואילך

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

מאפיינים

  • onHidden

    אירוע<functioncancelcancel>

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

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

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

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

      פונקציה

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

      () => void

  • onShown

    אירוע<functionpauseEmpty>

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

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

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

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

      פונקציה

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

      () => void

  • הצג

    ריק

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

    הפונקציה show נראית כך:

    () => {...}

שיטות

createView()

Chrome 112 ואילך
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

יצירת תצוגה שיכולה לטפל בשידור החוזר. התצוגה הזו תוטמע בחלונית של מכשיר ההקלטה.

פרמטרים

  • title

    מחרוזת

    כותרת שמוצגת לצד סמל התוסף בסרגל הכלים של הכלים למפתחים.

  • pagePath

    מחרוזת

    הנתיב של דף ה-HTML של הלוח, ביחס לספריית התוספים.

החזרות

registerRecorderExtensionPlugin()

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

רושם פלאגין תוסף של מכשיר ההקלטה.

פרמטרים

  • יישומי פלאגין

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

  • שם

    מחרוזת

    שם הפלאגין.

  • mediaType

    מחרוזת

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