chrome.devtools.recorder

شرح

از chrome.devtools.recorder API برای سفارشی کردن پانل Recorder در DevTools استفاده کنید.

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

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

دسترسی

Chrome 105+

با شروع از Chrome 105، می توانید عملکرد صادرات را گسترش دهید. با شروع از Chrome 112، می‌توانید دکمه پخش مجدد را گسترش دهید.

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

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

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

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

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

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

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

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

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

یک نمونه برنامه افزودنی کامل را در GitHub پیدا کنید.

انواع

RecorderExtensionPlugin

رابط پلاگینی که پنل Recorder برای سفارشی کردن پنل Recorder فراخوانی می کند.

خواص

• بازپخش

  خالی

  Chrome 112+

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

  تابع replay به نظر می رسد:

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

  • ضبط کردن

    هدف - شی

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

• رشته کردن

  خالی

  ضبط را از قالب پنل Recorder به رشته تبدیل می کند.

  تابع stringify به نظر می رسد:

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

  • ضبط کردن

    هدف - شی

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

• stringifyStep

  خالی

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

  تابع stringifyStep به نظر می رسد:

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

  • گام

    هدف - شی

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

RecorderView

Chrome 112+

نمایانگر نمای ایجاد شده توسط افزونه برای جاسازی در پانل Recorder است.

خواص

• در پنهان

  رویداد<functionvoidvoid>

  هنگامی که نما پنهان است شلیک می شود.

  تابع onHidden.addListener به نظر می رسد:

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

  • پاسخ به تماس

    تابع

    پارامتر callback به نظر می رسد:

    ()=>void

• در نشان داده شده است

  رویداد<functionvoidvoid>

  هنگامی که نما نشان داده می شود شلیک می شود.

  تابع onShown.addListener به نظر می رسد:

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

  • پاسخ به تماس

    تابع

    پارامتر callback به نظر می رسد:

    ()=>void

• نشان می دهد

  خالی

  نشان می دهد که برنامه افزودنی می خواهد این نمای را در پانل Recorder نشان دهد.

  تابع show به نظر می رسد:

  ()=> {...}

مواد و روش ها

createView()

Chrome 112+

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

یک نمای ایجاد می کند که می تواند پخش مجدد را کنترل کند. این نمای در داخل پنل Recorder تعبیه خواهد شد.

مولفه های

• عنوان

  رشته

  عنوانی که در کنار نماد برنامه افزودنی در نوار ابزار Developer Tools نمایش داده می شود.

• pagePath

  رشته

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

برمی گرداند

• RecorderView

registerRecorderExtensionPlugin()

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

افزونه افزونه Recorder را ثبت می کند.

مولفه های

• افزونه

  RecorderExtensionPlugin

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

• نام

  رشته

  نام افزونه.

• نوع رسانه

  رشته

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