chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

شرح

دردسترس بودن

برای آشنایی کلی با نحوه استفاده از میاناهای برنامه‌سازی کاربردی «ابزارهای توسعه‌دهندگان»، به خلاصه میاناهای برنامه‌سازی کاربردی 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 پیدا کنید.

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

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