chrome.devtools.recorder

توضیحات

devtools.recorder API یک ویژگی پیش‌نمایش است که به شما امکان می‌دهد پنل ضبط‌کننده را در Chrome DevTools گسترش دهید.

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

در دسترس بودن

مفاهیم و کاربردها

سفارشی‌سازی ویژگی خروجی

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

name که توسط افزونه ارائه می‌شود، در منوی Export در پنل Recorder نمایش داده می‌شود.

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

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

پارامتر mediaType به افزونه اجازه می‌دهد نوع خروجی تولید شده با توابع stringify و stringifyStep را مشخص کند. برای مثال، اگر نتیجه یک برنامه جاوا اسکریپت باشد، application/javascript .

سفارشی‌سازی دکمه‌ی پخش مجدد

برای سفارشی‌سازی دکمه‌ی پخش مجدد در Recorder ، از تابع registerRecorderExtensionPlugin استفاده کنید. افزونه باید متد replay را پیاده‌سازی کند تا سفارشی‌سازی اعمال شود. اگر این متد شناسایی شود، یک دکمه‌ی پخش مجدد در Recorder ظاهر می‌شود. پس از کلیک روی دکمه، شیء ضبط فعلی به عنوان اولین آرگومان به متد 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'
);

یک مثال کامل از افزونه را در گیت‌هاب پیدا کنید.

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

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