chrome.devtools.recorder

ब्यौरा

DevTools में रिकॉर्डर पैनल को पसंद के मुताबिक बनाने के लिए, chrome.devtools.recorder एपीआई का इस्तेमाल करें.

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

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

उपलब्धता

Chrome 105 और उसके बाद वाले वर्शन

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

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

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

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

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

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 पर एक्सटेंशन का पूरा उदाहरण ढूंढें.

टाइप

RecorderExtensionPlugin

यह एक प्लगिन इंटरफ़ेस है, जिसे Recorder पैनल इस्तेमाल करके, Recorder पैनल को पसंद के मुताबिक बनाया जाता है.

प्रॉपर्टी

  • फिर से चलाएं

    अमान्य

    Chrome 112 और उसके बाद वाले वर्शन के लिए

    एक्सटेंशन को कस्टम फिर से चलाने की सुविधा लागू करने की अनुमति देता है.

    replay फ़ंक्शन इस तरह दिखता है:

    (recording: object) => {...}

  • स्ट्रिंगाइज़ करें

    अमान्य

    यह सुविधा, रिकॉर्डर पैनल फ़ॉर्मैट में मौजूद रिकॉर्डिंग को स्ट्रिंग में बदलती है.

    stringify फ़ंक्शन इस तरह दिखता है:

    (recording: object) => {...}

  • stringifyStep

    अमान्य

    रिकॉर्डिंग के किसी चरण को रिकॉर्डर पैनल फ़ॉर्मैट से स्ट्रिंग में बदलता है.

    stringifyStep फ़ंक्शन इस तरह दिखता है:

    (step: object) => {...}

    • चरण

      ऑब्जेक्ट

      पेज के साथ उपयोगकर्ता के इंटरैक्शन को रिकॉर्ड करने का एक चरण. यह Puppeteer के स्टेप स्कीमा से मेल खाना चाहिए.

RecorderView

Chrome 112 और उसके बाद वाले वर्शन के लिए

यह ऐसे व्यू को दिखाता है जिसे रिकॉर्डर पैनल में एम्बेड करने के लिए, एक्सटेंशन ने बनाया है.

प्रॉपर्टी

  • onHidden

    इवेंट<फ़ंक्शनvoid>

    व्यू छिपे होने पर ट्रिगर होता है.

    onHidden.addListener फ़ंक्शन इस तरह दिखता है:

    (callback: function) => {...}

    • कॉलबैक

      फ़ंक्शन

      callback पैरामीटर ऐसा दिखता है:

      () => void

  • onShown

    इवेंट<फ़ंक्शनvoid>

    व्यू दिखाए जाने पर ट्रिगर होता है.

    onShown.addListener फ़ंक्शन इस तरह दिखता है:

    (callback: function) => {...}

    • कॉलबैक

      फ़ंक्शन

      callback पैरामीटर ऐसा दिखता है:

      () => void

  • दिखाएं

    अमान्य

    इससे पता चलता है कि एक्सटेंशन इस व्यू को रिकॉर्डर पैनल में दिखाना चाहता है.

    show फ़ंक्शन इस तरह दिखता है:

    () => {...}

तरीके

createView()

Chrome 112 और उसके बाद वाले वर्शन के लिए
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

ऐसा व्यू बनाता है जो रीप्ले को हैंडल कर सकता है. यह व्यू, रिकॉर्डर पैनल के अंदर एम्बेड किया जाएगा.

पैरामीटर

  • title

    स्ट्रिंग

    वह टाइटल जो डेवलपर टूल टूलबार में एक्सटेंशन आइकॉन के बगल में दिखता है.

  • pagePath

    स्ट्रिंग

    एक्सटेंशन डायरेक्ट्री से जुड़े पैनल के एचटीएमएल पेज का पाथ.

रिटर्न

registerRecorderExtensionPlugin()

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

यह Recorder एक्सटेंशन प्लगिन को रजिस्टर करता है.

पैरामीटर

  • प्लगिन

    रिकॉर्डर एक्सटेंशन प्लगिन इंटरफ़ेस को लागू करने वाला इंस्टेंस.

  • नाम

    स्ट्रिंग

    प्लगिन का नाम.

  • mediaType

    स्ट्रिंग

    प्लगिन से तैयार किए गए स्ट्रिंग कॉन्टेंट का मीडिया टाइप.