chrome.devtools.recorder

توضیحات

در دسترس بودن

برای آشنایی کلی با استفاده از Developer Tools APIs به خلاصه DevTools APIs مراجعه کنید.

نمای کلی

devtools.recorder API یک ویژگی پیش نمایش است که به شما امکان می دهد پانل ضبط را در ابزار توسعه کروم گسترش دهید. با شروع از 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'
);

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

برای سفارشی کردن دکمه پخش مجدد در Recorder ، از تابع registerRecorderExtensionPlugin استفاده کنید. افزونه باید روش replay را پیاده سازی کند تا سفارشی سازی اعمال شود. اگر روش شناسایی شود، یک دکمه پخش مجدد در ضبط کننده ظاهر می شود. با کلیک بر روی دکمه، شی ضبط فعلی به عنوان اولین آرگومان به روش replay ارسال می شود.

در این مرحله، برنامه افزودنی می‌تواند یک RecorderView برای مدیریت پخش نمایش دهد یا از دیگر APIهای برنامه افزودنی برای پردازش درخواست پخش مجدد استفاده کند. برای ایجاد یک RecorderView جدید، chrome.devtools.recorder.createView را فراخوانی کنید.

نمونه پلاگین Replay

کد زیر یک افزونه افزونه را پیاده سازی می کند که یک نمای ضبط کننده ساختگی ایجاد می کند و در صورت درخواست پخش مجدد آن را نمایش می دهد:

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,
)

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