chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

شرح

از chrome.devtools.recorder API برای سفارشی‌سازی پانل «ضبط‌صوت» در DevTools استفاده کنید.

دردسترس بودن

Chrome نسخه ۱۰۵ و بالاتر

برای آشنایی کلی با نحوه استفاده از میاناهای برنامه‌سازی کاربردی «ابزارهای توسعه‌دهندگان»، به خلاصه میاناهای برنامه‌سازی کاربردی DevTools مراجعه کنید.

نمای کلی

devtools.recorder API یک ویژگی پیش‌نمایشی است که به شما امکان می‌دهد پانل ضبط‌کننده را در Chrome DevTools گسترش دهید. از Chrome M105 به‌بعد، می‌توانید عملکرد صادر کردن را گسترش دهید. از Chrome M112، می‌توانید دکمه بازپخش را گسترش دهید.

سفارشی‌سازی کردن ویژگی صادر کردن

برای ثبت افزونه برافزا، از تابع registerRecorderExtensionPlugin استفاده کنید. این تابع به یک نمونه افزونه، یک name و یک mediaType به‌عنوان پارامتر نیاز دارد. نمونه افزایه باید دو روش را پیاده‌سازی کند: stringify و stringifyStep.

name ارائه‌شده توسط افزونه در منو صادر کردن در پانل ضبط‌صوت نشان داده می‌شود.

بسته به بافت صادر کردن، وقتی کاربر روی گزینه صادر کردن ارائه‌شده توسط افزونه کلیک می‌کند، پانل ضبط‌کننده یکی از دو تابع را فراخوانی می‌کند:

• stringify که کل ضبط جریان کاربر را دریافت می‌کند
• stringifyStep که یک مرحله ضبط‌شده دریافت می‌کند

پارامتر mediaType به افزونه اجازه می‌دهد نوع خروجی‌ای را که با توابع stringify و stringifyStep تولید می‌کند مشخص کند. برای مثال، application/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 پیدا کنید.

انواع

RecorderExtensionPlugin

میانای افزایه‌ای که پانل «ضبط‌کننده» برای سفارشی‌سازی پانل «ضبط‌کننده» فراخوانی می‌کند.

مشخصات

• بازپخش

  باطل کردن

  Chrome نسخه ۱۱۲ به بالا

  به افزونه اجازه می‌دهد عملکرد بازپخش سفارشی را پیاده‌سازی کند.

  تابع replay به‌صورت زیر است:

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

  • در‌حال ضبط

    شیء

    ضبط تعامل کاربر با صفحه. این باید با طرح ضبط Puppeteer مطابقت داشته باشد.

• رشته‌ای کردن

  باطل کردن

  قطعه ضبط‌شده را از قالب پانل «ضبط‌کننده» به رشته تبدیل می‌کند.

  تابع stringify به‌صورت زیر است:

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

  • در‌حال ضبط

    شیء

    ضبط تعامل کاربر با صفحه. این باید با طرح ضبط Puppeteer مطابقت داشته باشد.

• stringifyStep

  باطل کردن

  مرحله‌ای از ضبط را از قالب پانل «ضبط‌کننده» به رشته تبدیل می‌کند.

  تابع stringifyStep به‌صورت زیر است:

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

  • قدم

    شیء

    مرحله‌ای از ضبط تعامل کاربر با صفحه. این باید با طرحواره مرحله Puppeteer مطابقت داشته باشد.

RecorderView

Chrome نسخه ۱۱۲ به بالا

نمایانگر نمایی است که توسط افزونه ایجاد شده است تا در پانل «ضبط‌کننده» جاسازی شود.

مشخصات

• onHidden

  Event<functionvoidvoid>

  وقتی نما پنهان می‌شود، فعال می‌شود.

  تابع onHidden.addListener به‌صورت زیر است:

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

  • تماس برگشتی

    عملکرد

    پارامتر callback به‌صورت زیر است:

    () => void

• onShown

  Event<functionvoidvoid>

  وقتی نما نشان داده می‌شود، فعال می‌شود.

  تابع onShown.addListener به‌صورت زیر است:

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

  • تماس برگشتی

    عملکرد

    پارامتر callback به‌صورت زیر است:

    () => void

• نمایش

  باطل کردن

  نشان می‌دهد که افزونه می‌خواهد این نما را در پانل «ضبط‌کننده» نشان دهد.

  تابع show به‌صورت زیر است:

  () => {...}

روش‌ها

createView()

Chrome نسخه ۱۱۲ به بالا

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

نمایی ایجاد می‌کند که می‌تواند بازپخش را مدیریت کند. این نما در پانل «ضبط‌کننده» جاسازی خواهد شد.

پارامترها

• عنوان

  رشته

  عنوانی که در کنار نماد افزونه در نوارابزار «ابزارهای توسعه‌دهندگان» نمایش داده می‌شود.

• pagePath

  رشته

  مسیر صفحه HTML پانل نسبت به دایرکتوری افزونه.

بازگشتی‌ها

• RecorderView

registerRecorderExtensionPlugin()

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

افزونه «ضبط‌صوت» را ثبت می‌کند.

پارامترها

• افزایه

  RecorderExtensionPlugin

  نمونه‌ای که میانای RecorderExtensionPlugin را پیاده‌سازی می‌کند.

• نام

  رشته

  نام افزونه.

• mediaType

  رشته

  نوع رسانه محتوای رشته‌ای که افزونه تولید می‌کند.