এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

chrome.devtools.recorder

বর্ণনা

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

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

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

উপস্থিতি

Chrome 105+

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

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

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

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

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

stringify যা একটি সম্পূর্ণ ব্যবহারকারী প্রবাহ রেকর্ডিং গ্রহণ করে
stringifyStep যা একটি একক রেকর্ড করা পদক্ষেপ গ্রহণ করে

mediaType প্যারামিটার এক্সটেনশনকে stringify এবং stringifyStep ফাংশনগুলির সাথে যে ধরনের আউটপুট তৈরি করে তা নির্দিষ্ট করতে দেয়। উদাহরণস্বরূপ, application/javascript যদি ফলাফলটি একটি জাভাস্ক্রিপ্ট প্রোগ্রাম হয়।

রিপ্লে বোতামটি কাস্টমাইজ করা হচ্ছে

রেকর্ডারে রিপ্লে বোতামটি কাস্টমাইজ করতে, 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

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

বৈশিষ্ট্য

আবার দেখাও
অকার্যকর
Chrome 112+
এক্সটেনশনকে কাস্টম রিপ্লে কার্যকারিতা বাস্তবায়নের অনুমতি দেয়।
replay ফাংশনটি এরকম দেখাচ্ছে:
```
(recording: object)=> {...}
```
- রেকর্ডিং
  বস্তু
  পৃষ্ঠার সাথে ব্যবহারকারীর ইন্টারঅ্যাকশনের একটি রেকর্ডিং। এটি Puppeteer এর রেকর্ডিং স্কিমার সাথে মেলে।
stringify
অকার্যকর
রেকর্ডার প্যানেল বিন্যাস থেকে একটি রেকর্ডিংকে একটি স্ট্রিংয়ে রূপান্তর করে।
stringify ফাংশনটি এরকম দেখাচ্ছে:
```
(recording: object)=> {...}
```
- রেকর্ডিং
  বস্তু
  পৃষ্ঠার সাথে ব্যবহারকারীর ইন্টারঅ্যাকশনের একটি রেকর্ডিং। এটি Puppeteer এর রেকর্ডিং স্কিমার সাথে মেলে।
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 ইন্টারফেস বাস্তবায়নের একটি উদাহরণ।
নাম
স্ট্রিং
প্লাগইন এর নাম.
আমি আজ খুশি
স্ট্রিং
স্ট্রিং বিষয়বস্তুর মিডিয়া প্রকার যা প্লাগইন তৈরি করে।