browser.devtools.recorder

বিবরণ

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

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

উপলভ্যতা

ধারণা ও ব্যবহার

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

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

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

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

• stringify যা সম্পূর্ণ ইউজার ফ্লো রেকর্ডিং রিসিভ করে
• stringifyStep যা সিঙ্গেল রেকর্ড করা ধাপ গ্রহণ করে

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

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

Recorder-এ রিপ্লে বোতাম কাস্টমাইজ করতে, registerRecorderExtensionPlugin ফাংশন ব্যবহার করুন। কাস্টমাইজেশন কার্যকর করার জন্য প্লাগ-ইনকে অবশ্যই replay পদ্ধতি প্রয়োগ করতে হবে। পদ্ধতিটি শনাক্ত করা হলে, Recorder-এ একটি রিপ্লে বোতাম দেখা যাবে। বোতামে ক্লিক করলে, বর্তমান রেকর্ডিং অবজেক্টটি replay পদ্ধতিতে প্রথম আর্গুমেন্ট হিসেবে পাস করা হবে।

এই পর্যায়ে, এক্সটেনশনটি রিপ্লে ম্যানেজ করার জন্য RecorderView দেখাতে পারে অথবা রিপ্লে অনুরোধ প্রসেস করার জন্য অন্যান্য এক্সটেনশন API ব্যবহার করতে পারে। নতুন RecorderView তৈরি করতে, browser.devtools.recorder.createView ইনভোক করুন।

উদাহরণ

এক্সপোর্ট প্লাগ-ইন

নিম্নলিখিত কোডটি একটি এক্সটেনশন প্লাগ-ইন প্রয়োগ করে যা JSON.stringify ব্যবহার করে একটি রেকর্ডিংকে স্ট্রিংফাই করে:

class MyPlugin {
  stringify(recording) {
    return Promise.resolve(JSON.stringify(recording));
  }
  stringifyStep(step) {
    return Promise.resolve(JSON.stringify(step));
  }
}

browser.devtools.recorder.registerRecorderExtensionPlugin(
  new MyPlugin(),
  /*name=*/'MyPlugin',
  /*mediaType=*/'application/json'
);

রিপ্লে প্লাগ-ইন

নিম্নলিখিত কোডটি একটি এক্সটেনশন প্লাগ-ইন প্রয়োগ করে যা একটি ডামি রেকর্ডার ভিউ তৈরি করে এবং রিপ্লে অনুরোধের পরে এটি প্রদর্শন করে:

const view = await browser.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.
  browser.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();
  }
}

browser.devtools.recorder.registerRecorderExtensionPlugin(
  new RecorderPlugin(),
  /* name=*/ 'CoffeeTest'
);

GitHub-এ এক্সটেনশনের সম্পূর্ণ উদাহরণ খুঁজুন।

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

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