ब्यौरा
DevTools में रिकॉर्डर पैनल को पसंद के मुताबिक बनाने के लिए, chrome.devtools.recorder
API का इस्तेमाल करें.
devtools.recorder
API, झलक देखने की सुविधा है. इसकी मदद से, Chrome DevTools में Recorder पैनल को बड़ा किया जा सकता है.
Developer Tools API के इस्तेमाल के बारे में सामान्य जानकारी के लिए, DevTool 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'
);
रीप्ले प्लगिन
इस कोड में, एक ऐसा एक्सटेंशन प्लगिन लागू किया जाता है जो डमी 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 पर एक्सटेंशन का पूरा उदाहरण देखें.
टाइप
RecorderExtensionPlugin
ऐसा प्लगिन इंटरफ़ेस जिसे रिकॉर्डर पैनल, रिकॉर्डर पैनल को पसंद के मुताबिक बनाने के लिए शुरू करता है.
प्रॉपर्टी
-
फिर से चलाएं
void
Chrome 112 और उसके बाद के वर्शनएक्सटेंशन को पसंद के मुताबिक फिर से चलाने की सुविधा लागू करने की अनुमति देता है.
replay
फ़ंक्शन ऐसा दिखता है:(recording: object) => {...}
-
रिकॉर्ड किया जा
ऑब्जेक्ट
पेज के साथ उपयोगकर्ता के इंटरैक्शन की रिकॉर्डिंग. यह Puppeteer की रिकॉर्डिंग स्कीमा से मेल खाना चाहिए.
-
-
स्ट्रिंग डालें
void
रिकॉर्डर पैनल फ़ॉर्मैट से रिकॉर्डिंग को स्ट्रिंग में बदलता है.
stringify
फ़ंक्शन ऐसा दिखता है:(recording: object) => {...}
-
रिकॉर्ड किया जा
ऑब्जेक्ट
पेज के साथ उपयोगकर्ता के इंटरैक्शन की रिकॉर्डिंग. यह Puppeteer की रिकॉर्डिंग स्कीमा से मेल खाना चाहिए.
-
-
stringifyStep
void
रिकॉर्डर पैनल फ़ॉर्मैट में मौजूद रिकॉर्डिंग के किसी चरण को स्ट्रिंग में बदलता है.
stringifyStep
फ़ंक्शन ऐसा दिखता है:(step: object) => {...}
-
चरण
ऑब्जेक्ट
पेज के साथ उपयोगकर्ता के इंटरैक्शन को रिकॉर्ड करने का चरण. यह Puppeteer के स्टेप स्कीमा से मेल खाना चाहिए.
-
RecorderView
यह एक्सटेंशन के ज़रिए बनाए गए ऐसे व्यू के बारे में बताता है जिसे रिकॉर्डर पैनल में एम्बेड किया जा सकता है.
प्रॉपर्टी
-
onHidden
इवेंट<Functionvoidvoid>
व्यू छिपा होने पर सक्रिय होता है.
onHidden.addListener
फ़ंक्शन ऐसा दिखता है:(callback: function) => {...}
-
कॉलबैक
फ़ंक्शन
callback
पैरामीटर ऐसा दिखता है:() => void
-
-
onShown
इवेंट<Functionvoidvoid>
व्यू दिखने पर ट्रिगर होता है.
onShown.addListener
फ़ंक्शन ऐसा दिखता है:(callback: function) => {...}
-
कॉलबैक
फ़ंक्शन
callback
पैरामीटर ऐसा दिखता है:() => void
-
-
दिखाएं
void
इससे पता चलता है कि एक्सटेंशन इस व्यू को रिकॉर्डर पैनल में दिखाना चाहता है.
show
फ़ंक्शन ऐसा दिखता है:() => {...}
तरीके
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
ऐसा व्यू बनाता है जो रीप्ले को हैंडल कर सकता है. यह व्यू, रिकॉर्डर पैनल में एम्बेड हो जाएगा.
पैरामीटर
-
title
स्ट्रिंग
डेवलपर टूल टूलबार में एक्सटेंशन आइकॉन के बगल में दिखने वाला टाइटल.
-
pagePath
स्ट्रिंग
एक्सटेंशन डायरेक्ट्री से जुड़े पैनल के एचटीएमएल पेज का पाथ.
रिटर्न
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
Recorder एक्सटेंशन प्लगिन को रजिस्टर करता है.
पैरामीटर
-
plugin
RecorderExtensionPlugin इंटरफ़ेस को लागू करने वाला इंस्टेंस.
-
नाम
स्ट्रिंग
प्लगिन का नाम.
-
mediaType
स्ट्रिंग
प्लगिन से जनरेट की जाने वाली स्ट्रिंग कॉन्टेंट का मीडिया टाइप.