chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

বিবরণ

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

উপলভ্যতা

Chrome 105+

ডেভেলপার টুল API ব্যবহার করার বিষয়ে সাধারণ তথ্য পেতে DevTools API-এর সারসংক্ষেপ দেখুন।

এক নজরে

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

এক্সপোর্ট ফিচার কাস্টমাইজ করা

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

এক্সটেনশনের মাধ্যমে প্রদান করা name, Recorder প্যানেলের এক্সপোর্ট করুন মেনুতে দেখা যায়।

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

• 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 পদ্ধতি প্রয়োগ করতে হবে। পদ্ধতিটি শনাক্ত করা হলে, Recorder-এ একটি রিপ্লে বোতাম দেখা যাবে। বোতামে ক্লিক করলে, বর্তমান রেকর্ডিং অবজেক্টটি 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

একটি প্লাগ-ইন ইন্টারফেস যা Recorder প্যানেল কাস্টমাইজ করার জন্য Recorder প্যানেল চালু করে।

প্রপার্টি

• রিপ্লে করুন

  বাতিল

  Chrome 112+

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

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

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

  • রেকর্ডিং

    অবজেক্ট

    পৃষ্ঠার সাথে ব্যবহারকারীর ইন্টার‍্যাকশনের রেকর্ডিং। এটি Puppeteer-এর রেকর্ডিং স্কিমার সাথে মিলতে হবে।

• স্ট্রিংগিফাই করুন

  বাতিল

  রেকর্ডার প্যানেল ফর্ম্যাট থেকে একটি রেকর্ডিংকে স্ট্রিংয়ে কনভার্ট করে।

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

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

  • রেকর্ডিং

    অবজেক্ট

    পৃষ্ঠার সাথে ব্যবহারকারীর ইন্টার‍্যাকশনের রেকর্ডিং। এটি Puppeteer-এর রেকর্ডিং স্কিমার সাথে মিলতে হবে।

• stringifyStep

  বাতিল

  রেকর্ডার প্যানেল ফর্ম্যাট থেকে রেকর্ডিংয়ের একটি ধাপ স্ট্রিংয়ে কনভার্ট করে।

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

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

  • ধাপ

    অবজেক্ট

    পৃষ্ঠার সাথে ব্যবহারকারীর ইন্টার‍্যাকশনের রেকর্ডিংয়ের একটি ধাপ। এটি Puppeteer-এর স্টেপ স্কিমার সাথে ম্যাচ করতে হবে।

RecorderView

Chrome 112+

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

প্রপার্টি

• onHidden

  Event<functionvoidvoid>

  ভিউ লুকানো হলে ফায়ার করা হয়।

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

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

  • কলব্যাক

    ফাংশন

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

    () => void

• onShown

  Event<functionvoidvoid>

  ভিউ দেখানো হলে ফায়ার করা হয়।

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

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

  • কলব্যাক

    ফাংশন

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

    () => void

• দেখান

  বাতিল

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

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

  () => {...}

পদ্ধতি

createView()

Chrome 112+

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

রিপ্লে ম্যানেজ করতে পারে এমন একটি ভিউ তৈরি করে। এই ভিউ Recorder প্যানেলের মধ্যে এম্বেড করা হবে।

প্যারামিটারগুলি

• শীর্ষক

  স্ট্রিং

  ডেভেলপার টুল টুলবারে এক্সটেনশন আইকনের পাশে দেখানো শীর্ষক।

• pagePath

  স্ট্রিং

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

রিটার্ন

• RecorderView

registerRecorderExtensionPlugin()

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

Recorder এক্সটেনশন প্লাগ-ইন রেজিস্টার করে।

প্যারামিটারগুলি

• প্লাগ-ইন

  RecorderExtensionPlugin

  RecorderExtensionPlugin ইন্টারফেস প্রয়োগকারী ইনস্ট্যান্স।

• নাম

  স্ট্রিং

  প্লাগ-ইনের নাম।

• mediaType

  স্ট্রিং

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