browser.devtools.recorder

תיאור

משתמשים ב-API ‏chrome.devtools.recorder כדי להתאים אישית את החלונית Recorder בכלי הפיתוח.

‫devtools.recorder API היא תכונה בגרסת טרום-השקה (Preview) שמאפשרת להרחיב את החלונית "מקליט" בכלי הפיתוח ל-Chrome.

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

זמינות

‫Chrome 105 ואילך browser.* ‎ מ-Chrome 152 ואילך

החל מגרסה 105 של Chrome, אפשר להרחיב את פונקציונליות הייצוא. החל מגרסה 112 של Chrome, אפשר להרחיב את כפתור ההפעלה מחדש.

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

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

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

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

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

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

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

התאמה אישית של הכפתור להפעלה מחדש

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

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

דוגמאות

פלאגין של ייצוא

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

הפלאגין Replay

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

סוגים

RecorderExtensionPlugin

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

מאפיינים

• הפעלה מחדש

  void

  Chrome 112 ואילך browser.* ‎ מ-Chrome 152

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

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

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

  • להקליט את

    אובייקט

    הקלטה של האינטראקציה של המשתמש עם הדף. הפורמט צריך להתאים לסכימת ההקלטה של Puppeteer.

• stringify

  void

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

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

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

  • להקליט את

    אובייקט

    הקלטה של האינטראקציה של המשתמש עם הדף. הפורמט צריך להתאים לסכימת ההקלטה של Puppeteer.

• stringifyStep

  void

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

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

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

  • שלב

    אובייקט

    שלב בהקלטה של אינטראקציה של משתמש עם הדף. הוא צריך להתאים לסכימת השלבים של Puppeteer.

RecorderView

‫Chrome 112 ואילך browser.* ‎ מ-Chrome 152

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

מאפיינים

• onHidden

  Event<functionvoidvoid>

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

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

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

  • callback

    פונקציה

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

    () => void

• onShown

  Event<functionvoidvoid>

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

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

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

  • callback

    פונקציה

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

    () => void

• הצג

  void

  מציין שהתוסף רוצה להציג את התצוגה הזו בחלונית של Recorder.

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

  () => {...}

Methods

createView()

‫Chrome 112 ואילך browser.* ‎ מ-Chrome 152

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

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

פרמטרים

• title

  מחרוזת

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

• pagePath

  מחרוזת

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

החזרות

• RecorderView

registerRecorderExtensionPlugin()

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

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

פרמטרים

• פלאגין

  RecorderExtensionPlugin

  מופע שמטמיע את הממשק RecorderExtensionPlugin.

• שם

  מחרוזת

  שם הפלאגין.

• mediaType

  מחרוזת

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