chrome.devtools.recorder

বর্ণনা

DevTools-এ রেকর্ডার প্যানেল কাস্টমাইজ করতে chrome.devtools.recorder API ব্যবহার করুন।

প্রাপ্যতা

Chrome 105+

ডেভেলপার টুল এপিআই ব্যবহার করার জন্য সাধারণ পরিচিতির জন্য DevTools API-এর সারাংশ দেখুন।

ওভারভিউ

devtools.recorder API হল একটি পূর্বরূপ বৈশিষ্ট্য যা আপনাকে Chrome DevTools-এ রেকর্ডার প্যানেল প্রসারিত করতে দেয়। Chrome M105 থেকে শুরু করে, আপনি এক্সপোর্ট কার্যকারিতা প্রসারিত করতে পারেন। Chrome M112 থেকে শুরু করে, আপনি রিপ্লে বোতামটি প্রসারিত করতে পারেন।

রপ্তানি বৈশিষ্ট্য কাস্টমাইজ করা

একটি এক্সটেনশন প্লাগইন নিবন্ধন করতে, registerRecorderExtensionPlugin ফাংশন ব্যবহার করুন। এই ফাংশনের জন্য প্যারামিটার হিসাবে একটি প্লাগইন উদাহরণ, একটি name এবং একটি mediaType প্রয়োজন৷ প্লাগইন ইনস্ট্যান্সকে অবশ্যই দুটি পদ্ধতি প্রয়োগ করতে হবে: stringify এবং stringifyStep

এক্সটেনশন দ্বারা প্রদত্ত name রেকর্ডার প্যানেলে রপ্তানি মেনুতে প্রদর্শিত হয়।

রপ্তানি প্রসঙ্গের উপর নির্ভর করে, যখন ব্যবহারকারী এক্সটেনশন দ্বারা প্রদত্ত রপ্তানি বিকল্পে ক্লিক করেন, তখন রেকর্ডার প্যানেল দুটি ফাংশনের মধ্যে একটিকে আহ্বান করে:

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 এ একটি সম্পূর্ণ এক্সটেনশন উদাহরণ খুঁজুন।

প্রকারভেদ

RecorderExtensionPlugin

একটি প্লাগইন ইন্টারফেস যা রেকর্ডার প্যানেল রেকর্ডার প্যানেল কাস্টমাইজ করতে আহ্বান করে।

বৈশিষ্ট্য

  • রিপ্লে

    অকার্যকর

    Chrome 112+

    এক্সটেনশনকে কাস্টম রিপ্লে কার্যকারিতা বাস্তবায়নের অনুমতি দেয়।

    replay ফাংশনটি এরকম দেখাচ্ছে:

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

  • stringify

    অকার্যকর

    রেকর্ডার প্যানেল বিন্যাস থেকে একটি রেকর্ডিংকে একটি স্ট্রিংয়ে রূপান্তর করে।

    stringify ফাংশনটি এর মতো দেখাচ্ছে:

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

  • stringifyStep

    অকার্যকর

    রেকর্ডার প্যানেল বিন্যাস থেকে রেকর্ডিংয়ের একটি ধাপকে একটি স্ট্রিংয়ে রূপান্তর করে।

    stringifyStep ফাংশন এর মত দেখাচ্ছে:

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

    • পদক্ষেপ

      বস্তু

      পৃষ্ঠার সাথে ব্যবহারকারীর মিথস্ক্রিয়া রেকর্ডিংয়ের একটি ধাপ। এটি Puppeteer এর স্টেপ স্কিমার সাথে মেলে।

RecorderView

Chrome 112+

রেকর্ডার প্যানেলের ভিতরে এম্বেড করার জন্য এক্সটেনশন দ্বারা তৈরি একটি দৃশ্যের প্রতিনিধিত্ব করে।

বৈশিষ্ট্য

  • উপর লুকানো

    ইভেন্ট<functionvoidvoid>

    দৃশ্য লুকিয়ে থাকলে গুলি করা হয়।

    onHidden.addListener ফাংশনটি এরকম দেখাচ্ছে:

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

    • কলব্যাক

      ফাংশন

      callback প্যারামিটারটি এর মতো দেখাচ্ছে:

      () => void

  • দেখানো হয়েছে

    ইভেন্ট<functionvoidvoid>

    দৃশ্য দেখানো হলে গুলি চালানো হয়।

    onShown.addListener ফাংশনটি এরকম দেখাচ্ছে:

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

    • কলব্যাক

      ফাংশন

      callback প্যারামিটারটি এর মতো দেখাচ্ছে:

      () => void

  • প্রদর্শন

    অকার্যকর

    নির্দেশ করে যে এক্সটেনশনটি রেকর্ডার প্যানেলে এই দৃশ্যটি দেখাতে চায়৷

    show ফাংশন এর মত দেখাচ্ছে:

    () => {...}

পদ্ধতি

createView()

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

রিপ্লে পরিচালনা করতে পারে এমন একটি দৃশ্য তৈরি করে। এই দৃশ্যটি রেকর্ডার প্যানেলের ভিতরে এমবেড করা হবে।

পরামিতি

  • শিরোনাম

    স্ট্রিং

    ডেভেলপার টুলস টুলবারে এক্সটেনশন আইকনের পাশে প্রদর্শিত শিরোনাম।

  • পৃষ্ঠাপথ

    স্ট্রিং

    এক্সটেনশন ডিরেক্টরির সাথে সম্পর্কিত প্যানেলের HTML পৃষ্ঠার পাথ।

রিটার্নস

registerRecorderExtensionPlugin()

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

একটি রেকর্ডার এক্সটেনশন প্লাগইন নিবন্ধন করে।

পরামিতি

  • RecorderExtensionPlugin ইন্টারফেস বাস্তবায়নের একটি উদাহরণ।

  • নাম

    স্ট্রিং

    প্লাগইন এর নাম.

  • মিডিয়া টাইপ

    স্ট্রিং

    স্ট্রিং বিষয়বস্তুর মিডিয়া প্রকার যা প্লাগইন তৈরি করে।