chrome.devtools.recorder

বর্ণনা

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

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

প্রাপ্যতা

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

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

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

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

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