chrome.devtools.recorder

ब्यौरा

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

डेवलपर टूल एपीआई इस्तेमाल करने के बारे में सामान्य जानकारी के लिए, DevTools API की खास जानकारी देखें.

उपलब्धता

सिद्धांत और उनका इस्तेमाल

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

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

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

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

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

mediaType पैरामीटर की मदद से, एक्सटेंशन stringify और stringifyStep फ़ंक्शन. उदाहरण के लिए, अगर नतीजा JavaScript है, तो application/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'
);

प्लग इन फिर से चलाएं

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

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