chrome.devtools.recorder

ब्यौरा

devtools.recorder API, झलक के तौर पर उपलब्ध एक सुविधा है. इसकी मदद से, Chrome DevTools में Recorder पैनल को बढ़ाया जा सकता है.

Developer Tools API इस्तेमाल करने के बारे में सामान्य जानकारी पाने के लिए, DevTools API की खास जानकारी देखें.

उपलब्धता

कॉन्सेप्ट और इस्तेमाल करने का तरीका

एक्सपोर्ट करने की सुविधा को पसंद के मुताबिक बनाना

किसी एक्सटेंशन प्लगिन को रजिस्टर करने के लिए, registerRecorderExtensionPlugin फ़ंक्शन का इस्तेमाल करें. इस फ़ंक्शन के लिए, पैरामीटर के तौर पर प्लगिन इंस्टेंस, name, और mediaType की ज़रूरत होती है. प्लगिन इंस्टेंस को दो तरीके लागू करने होंगे: stringify और stringifyStep.

एक्सटेंशन से मिला name, Recorder पैनल में मौजूद एक्सपोर्ट करें मेन्यू में दिखता है.

एक्सपोर्ट के कॉन्टेक्स्ट के आधार पर, जब उपयोगकर्ता एक्सटेंशन की ओर से दिए गए एक्सपोर्ट विकल्प पर क्लिक करता है, तो Recorder पैनल इनमें से किसी एक फ़ंक्शन को शुरू करता है:

• stringify जिसे पूरे यूज़र फ़्लो की रिकॉर्डिंग मिलती है
• stringifyStep जो एक रिकॉर्ड किया गया चरण पाता है

mediaType पैरामीटर की मदद से एक्सटेंशन, stringify और stringifyStep फ़ंक्शन का इस्तेमाल करके जनरेट किए जाने वाले आउटपुट के टाइप के बारे में बता सकता है. उदाहरण के लिए, application/javascript अगर नतीजा कोई JavaScript प्रोग्राम है.

रीप्ले बटन को पसंद के मुताबिक बनाना

Recorder में मौजूद 'दोबारा चलाएं' बटन को पसंद के मुताबिक बनाने के लिए, registerRecorderExtensionPlugin फ़ंक्शन का इस्तेमाल करें. कस्टम बनाने की सुविधा को लागू करने के लिए, प्लगिन को replay तरीके को लागू करना होगा. अगर इस तरीके का पता चलता है, तो Recorder में एक रीप्ले बटन दिखेगा. बटन पर क्लिक करने पर, मौजूदा रिकॉर्डिंग ऑब्जेक्ट को replay तरीके के पहले आर्ग्युमेंट के तौर पर पास किया जाएगा.

इस समय, एक्सटेंशन, रीप्ले को मैनेज करने के लिए RecorderView दिखा सकता है. इसके अलावा, रीप्ले के अनुरोध को प्रोसेस करने के लिए, अन्य एक्सटेंशन एपीआई का इस्तेमाल कर सकता है. नया 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'
);

Replay plugin

नीचे दिया गया कोड, एक एक्सटेंशन प्लगिन लागू करता है. यह एक डमी रिकॉर्डर व्यू बनाता है और रीप्ले के अनुरोध पर उसे दिखाता है:

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,
): RecorderView

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