browser.devtools.recorder

ब्यौरा

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

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

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

उपलब्धता

Chrome 105+ browser.* Chrome 152 से

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

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

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

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

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

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

'फिर से चलाएं' बटन को पसंद के मुताबिक बनाना

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

इस समय, एक्सटेंशन रीप्ले को मैनेज करने के लिए RecorderView दिखा सकता है या रीप्ले के अनुरोध को प्रोसेस करने के लिए, अन्य एक्सटेंशन एपीआई का इस्तेमाल कर सकता है. नया RecorderView बनाने के लिए, browser.devtools.recorder.createView को चालू करें.

उदाहरण

एक्सपोर्ट प्लगिन

नीचे दिया गया कोड, एक एक्सटेंशन प्लगिन को लागू करता है. यह प्लगिन, JSON.stringify का इस्तेमाल करके रिकॉर्डिंग को स्ट्रिंग में बदलता है:

class MyPlugin {
  stringify(recording) {
    return Promise.resolve(JSON.stringify(recording));
  }
  stringifyStep(step) {
    return Promise.resolve(JSON.stringify(step));
  }
}

browser.devtools.recorder.registerRecorderExtensionPlugin(
  new MyPlugin(),
  /*name=*/'MyPlugin',
  /*mediaType=*/'application/json'
);

रीप्ले प्लगिन

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

const view = await browser.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.
  browser.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();
  }
}

browser.devtools.recorder.registerRecorderExtensionPlugin(
  new RecorderPlugin(),
  /* name=*/ 'CoffeeTest'
);

GitHub पर एक्सटेंशन का पूरा उदाहरण देखें.

टाइप

RecorderExtensionPlugin

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

प्रॉपर्टी

  • फिर से चलाएं

    void

    Chrome 112+ Chrome 152 से browser.*

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

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

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

  • stringify

    void

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

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

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

  • stringifyStep

    void

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

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

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

    • चरण

      ऑब्जेक्ट

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

RecorderView

Chrome 112+ Chrome 152 से browser.*

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

प्रॉपर्टी

  • onHidden

    Event<functionvoidvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • onShown

    Event<functionvoidvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • दिखाएं

    void

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

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

    () => {...}

तरीके

createView()

Chrome 112+ Chrome 152 से browser.* 
browser.devtools.recorder.createView(
  title: string,
  pagePath: string,
): RecorderView

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

पैरामीटर

  • title

    स्ट्रिंग

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

  • pagePath

    स्ट्रिंग

    एक्सटेंशन डायरेक्ट्री के हिसाब से, पैनल के एचटीएमएल पेज का पाथ.

रिटर्न

registerRecorderExtensionPlugin()

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

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

पैरामीटर

  • प्लगिन

    RecorderExtensionPlugin

    RecorderExtensionPlugin इंटरफ़ेस को लागू करने वाला इंस्टेंस.

  • नाम

    स्ट्रिंग

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

  • mediaType

    स्ट्रिंग

    प्लग इन से जनरेट होने वाले स्ट्रिंग कॉन्टेंट का मीडिया टाइप.