chrome.devtools.recorder

توضیحات

برای سفارشی‌سازی پنل ضبط‌کننده در DevTools از API 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'
);

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

انواع

RecorderExtensionPlugin

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

خواص

• پخش مجدد

  باطل

  کروم ۱۱۲+

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

  تابع replay به شکل زیر است:

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

  • ضبط

    شیء

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

• رشته رشته کردن

  باطل

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

  تابع stringify به شکل زیر است:

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

  • ضبط

    شیء

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

• stringifyStep

  باطل

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

  تابع stringifyStep به شکل زیر است:

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

  • گام

    شیء

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

RecorderView

کروم ۱۱۲+

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

خواص

• روی پنهان

  رویداد<functionvoidvoid>

  وقتی نمای مورد نظر پنهان باشد، اجرا می‌شود.

  تابع onHidden.addListener به شکل زیر است:

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

  • تماس برگشتی

    تابع

    پارامتر callback به شکل زیر است:

    () => void

• نمایش داده شده

  رویداد<functionvoidvoid>

  زمانی که نما نمایش داده می‌شود، اجرا می‌شود.

  تابع onShown.addListener به شکل زیر است:

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

  • تماس برگشتی

    تابع

    پارامتر callback به شکل زیر است:

    () => void

• نشان دادن

  باطل

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

  تابع show به شکل زیر است:

  () => {...}

روش‌ها

createView()

کروم ۱۱۲+

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

یک نما (view) ایجاد می‌کند که می‌تواند پخش مجدد را مدیریت کند. این نما در داخل پنل ضبط‌کننده (Recorder) تعبیه خواهد شد.

پارامترها

• عنوان

  رشته

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

• مسیر صفحه

  رشته

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

بازگشت‌ها

• ضبط کننده

registerRecorderExtensionPlugin()

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

یک افزونه‌ی ضبط‌کننده (Recorder) را ثبت می‌کند.

پارامترها

• افزونه

  افزونه ضبط کننده

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

• نام

  رشته

  نام افزونه.

• نوع رسانه

  رشته

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