chrome.devtools.recorder

ब्यौरा

उपलब्धता

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

खास जानकारी

devtools.recorder API, झलक देखने की सुविधा है. इसकी मदद से, Chrome DevTools में Recorder पैनल को बड़ा किया जा सकता है. Chrome के M105 वर्शन से, एक्सपोर्ट करने की सुविधा को बेहतर बनाया जा सकता है. Chrome के M112 वर्शन से, 'फिर से चलाएं' बटन को बढ़ाया जा सकता है.

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

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

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

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

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

mediaType पैरामीटर की मदद से एक्सटेंशन, stringify और stringifyStep फ़ंक्शन की मदद से जनरेट होने वाले आउटपुट का टाइप तय कर सकता है. उदाहरण के लिए, अगर नतीजा कोई JavaScript प्रोग्राम है, तो 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 दिखा सकता है या रीप्ले के अनुरोध को प्रोसेस करने के लिए, अन्य एक्सटेंशन एपीआई का इस्तेमाल कर सकता है. नया RecorderView बनाने के लिए, chrome.devtools.recorder.createView को शुरू करें.

प्लगिन फिर से चलाने का उदाहरण

इस कोड में, एक ऐसा एक्सटेंशन प्लगिन लागू किया जाता है जो डमी Recorder व्यू बनाता है. साथ ही, इसे फिर से चलाने का अनुरोध करने पर दिखाता है:

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