chrome.devtools.recorder

বর্ণনা

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

devtools.recorder API হলো একটি প্রিভিউ ফিচার যা আপনাকে Chrome DevTools-এর Recorder প্যানেলকে সম্প্রসারিত করার সুযোগ দেয়।

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

প্রাপ্যতা

ক্রোম ১০৫+

ক্রোম ১০৫ থেকে, আপনি এক্সপোর্ট কার্যকারিতা প্রসারিত করতে পারবেন। ক্রোম ১১২ থেকে, আপনি রিপ্লে বাটনটি প্রসারিত করতে পারবেন।

ধারণা এবং ব্যবহার

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

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

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

এক্সপোর্টের প্রেক্ষাপটের ওপর নির্ভর করে, যখন ব্যবহারকারী এক্সটেনশন দ্বারা প্রদত্ত এক্সপোর্ট অপশনটিতে ক্লিক করেন, তখন রেকর্ডার প্যানেলটি দুটি ফাংশনের মধ্যে একটি চালু করে:

• সম্পূর্ণ ইউজার ফ্লো রেকর্ডিং গ্রহণকারী 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 ফাংশনটি দেখতে এইরকম:

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

  • ধাপ

    বস্তু

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

RecorderView

ক্রোম ১১২+

এক্সটেনশন দ্বারা তৈরি একটি ভিউকে উপস্থাপন করে, যা রেকর্ডার প্যানেলের ভিতরে এমবেড করা হবে।

বৈশিষ্ট্য

• লুকানো

  ইভেন্ট<ফাংশনভয়েডভয়েড>

  ভিউটি লুকানো থাকলে এটি সক্রিয় হয়।

  onHidden.addListener ফাংশনটি দেখতে এইরকম:

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

  • কলব্যাক

    ফাংশন

    callback প্যারামিটারটি দেখতে এইরকম:

    () => void

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

  ইভেন্ট<ফাংশনভয়েডভয়েড>

  ভিউটি প্রদর্শিত হলে এটি সক্রিয় হয়।

  onShown.addListener ফাংশনটি দেখতে এইরকম:

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

  • কলব্যাক

    ফাংশন

    callback প্যারামিটারটি দেখতে এইরকম:

    () => void

• দেখান

  শূন্যতা

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

  show ফাংশনটি দেখতে এইরকম:

  () => {...}

পদ্ধতি

createView()

ক্রোম ১১২+

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

এমন একটি ভিউ তৈরি করে যা রিপ্লে পরিচালনা করতে পারে। এই ভিউটি রেকর্ডার প্যানেলের ভিতরে এমবেড করা থাকবে।

প্যারামিটার

• শিরোনাম

  স্ট্রিং

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

• পৃষ্ঠাপথ

  স্ট্রিং

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

ফেরত

• রেকর্ডারভিউ

registerRecorderExtensionPlugin()

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

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

প্যারামিটার

• প্লাগইন

  রেকর্ডার এক্সটেনশন প্লাগইন

  RecorderExtensionPlugin ইন্টারফেসটি বাস্তবায়নকারী একটি ইনস্ট্যান্স।

• নাম

  স্ট্রিং

  প্লাগইনটির নাম।

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

  স্ট্রিং

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