मैं क्रोम एक्सटेंशन डेवलपमेंट के लिए वेबस्टॉर्म का उपयोग कैसे करूं?


104

मैंने अभी वेबस्टॉर्म 5 खरीदा है और अब तक वास्तव में इसके निरीक्षण सुविधाओं का आनंद ले रहा हूं। मेरे Chrome एक्सटेंशन को विकसित करते समय मैंने जो एक अड़चन डाली है, वह यह है कि यह chromeचर को नहीं पहचानता है :

अनारक्षित चर या प्रकार क्रोम

क्या कोई ऐसा तरीका है जिससे मैं chromeइंस्पेक्टर के लिए वैरिएबल जोड़ सकता हूं ताकि मैं टाइप करते समय इसे स्वतः पूर्ण कर सकूं? मैं अनुमान लगा रहा हूं कि मुझे बाहरी पुस्तकालय के रूप में क्रोमियम जोड़ने की आवश्यकता होगी, लेकिन मैं अनिश्चित हूं कि कहां से शुरू करूं।

जवाबों:


215

फर्स्ट टाइम सेटअप

  1. Settingsसंवाद खोलें ( File> Settings)

  2. क्लिक करें Languages & Frameworks> Javascript>Libraries

  3. क्लिक करें Download

  4. सुनिश्चित करें कि TypeScript community stubsचयनित है

  5. chromeसूची से चयन करें (आप इसे केवल टाइप करके जल्दी से पा सकते हैं chrome)

  6. क्लिक करें Download and Install

  7. OKसेटिंग्स संवाद को बंद करने के लिए क्लिक करें ।


चरण 2-6 नीचे दिए गए हैं:

वेबस्टॉर्म स्क्रीनशॉट


बाद के प्रोजेक्ट्स में

किसी भी बाद की परियोजना में, आप बस:

  1. Settingsसंवाद फिर से खोलें ( File> Settings)

  2. क्लिक करें Languages & Frameworks> Javascript> Librariesफिर से

  3. जाँच chrome-DefinitelyTyped

  4. OKसंवाद बंद करने के लिए क्लिक करें ।


नीचे दिखाए गए चरण 2-4:

वेबस्टॉर्म स्क्रीनशॉट


3
Intellij में भी काम करता है
Oskar Ferm

2
IntelliJ IDEA 2017.1 के रूप में एक अद्यतन उत्तर की आवश्यकता है, "टाइपस्क्रिप्ट समुदाय स्टब्स" के तहत "क्रोम" नहीं दिखाता है। किसी भी विचार कैसे जोड़ना है?
रीम

1
यह पता चला IntelliJ विचार में एक बग होने के लिए 2017.1 youtrack.jetbrains.com/issue/WEB-26160#u=1490671035044
रीम

1
मैक पर, नाम सेटिंग नहीं बल्कि वरीयता है। लेकिन आप इसका उपयोग करके इसका उपयोग कर सकते हैंcommand+,
उलसीसे बीएन

4
यह शायद ध्यान दिया जाना चाहिए कि WebStorm को फिर से शुरू करने की आवश्यकता होगी।
टायलर क्रॉम्पटन

42

अद्यतन 2 :

अब यह बॉक्स से बाहर समर्थित है, नीचे पूरा जवाब देखें

लाइब्रेरी डाउनलोड करें

अद्यतन :

एक अधिक पूर्ण स्टब फ़ाइल है जिसे कोड पूरा करने के लिए लाइब्रेरी के रूप में जोड़ा जा सकता है। यह क्लोजर कंपाइलर प्रोजेक्ट का एक हिस्सा है। Chrome_extensions.js डाउनलोड करें

इस लाइब्रेरी को IDE से स्वचालित रूप से जोड़ने के लिए WebStorm के लिए सुविधा अनुरोध भी देखें ।


आपको Chrome API के लिए कहीं और JavaScript लाइब्रेरी प्राप्त करने की आवश्यकता है, या मूल पूर्णता प्राप्त करने के लिए एक स्टब का उपयोग करना होगा

लाइब्रेरी या स्टब को वेबस्टॉर्म में कॉन्फ़िगर किया जा सकता है


मुझे JSON फाइलें एक्सटेंशन API के साथ मिलीं । कोई इन JSON फ़ाइलों से JS स्टब्स का निर्माण करने वाली स्क्रिप्ट लिख सकता है, स्टब्स ऊपर GitHub पर लिंक किए गए मूल संस्करण की तरह दिख सकते हैं, लेकिन स्वचालित पीढ़ी के साथ उनमें लगभग पूर्ण API और JSDoc टिप्पणियाँ होंगी ताकि यहाँ जैसे दस्तावेज़ देखे जा सकें सीधे आईडीई में।

JSON => जावास्क्रिप्ट ऑब्जेक्ट स्टब्स मैपिंग इस मामले में बहुत सीधी है और इस तरह के कनवर्टर को लिखना एक दिन (या कुशल कोडर के लिए कई घंटे) से अधिक नहीं लेना चाहिए।

यदि कोई आगे बढ़ता है और इसे लागू करता है, तो कृपया यहां परिणामों के लिंक को पोस्ट करें।


धन्यवाद, मुझे यह विचार सबसे अच्छा लगा। मैंने वास्तव में क्रोमियम गिट रेपो की क्लोनिंग को समाप्त कर /chrome/renderer/resources/extensionsदिया और उस फ़ोल्डर को जोड़ दिया जिसने मुझे निरीक्षण के लिए सबसे ज्यादा दिया।
परिपक्वता

sirlancelot - मेरे लिए काम नहीं करता है ... क्या आप यहां कुछ स्निपर पोस्ट कर सकते हैं, जो इस dir को WebStorm (या IntelliJ) में लाइब्रेरी के रूप में जोड़ने के बाद ऑटो पूर्णता है?
मीकल बर्नहार्ड

2
मैंने क्रोम एक्सटेंशन डाउनलोड किया लेकिन Unresolved variableवेबस्टॉर्म में चेतावनी से छुटकारा पाने के लिए , मुझे निम्न पंक्ति को इसमें जोड़ना पड़ा chrome_extension.js: var chrome = {}और इसे अपने प्रोजेक्ट में एक लाइब्रेरी के रूप में शामिल करना चाहिए।
एमके सफी

वहाँ भी में एक काफी हाल ही में (दिसंबर 2013) vsdoc फ़ाइल है code.google.com/p/chrome-api-vsdoc । इसमें ऑब्जेक्ट, विधि और पैरामीटर विवरण (जिसमें इस टाइपस्क्रिप्ट संस्करण का अभाव है) है। डॉक एनोटेशन के लिए एक्सएमएल का उपयोग करते हुए vsdoc के कारण Ctrl-Q के साथ देखे जाने पर वर्णन थोड़ा उकेरा हुआ है, लेकिन फिर भी पठनीय और प्रयोग करने योग्य है। बस वेबस्टॉर्म में एक कस्टम JS लाइब्रेरी के रूप में डाउनलोड किए गए vsdoc को जोड़ें।
बोरिस बी।

2

वेबस्टॉर्म को एक दिन परिभाषित परिभाषाओं के लिए स्वत: पूर्णता को सक्षम करने के लिए सीधे जशन परिभाषाओं को स्वीकार करना चाहिए। इस बीच, आप क्रोम एक्सटेंशन एपीआई के लिए ऑटो-पूर्ण को सक्षम करने के लिए js फ़ाइलों को जेएस में बदलने के लिए https://github.com/QuickrWorld/jsgen पर कार्यक्रम का उपयोग कर सकते हैं ।


1

AppScript, कार्यों और वर्गों जैसे लिखने के लिए ड्राइव ऐप्लिकेशन , SpreadsheetApp , वहाँ WebStorm या Intellij में एक प्लगइन गूगल-ऐप्लिकेशन-स्क्रिप्ट कहा जाता है।
स्थापना विधि ऊपर के समान है। दूसरी ओर, आपको .gs फ़ाइल को जावास्क्रिप्ट के रूप में चिह्नित या खोलना चाहिए। (जुलाई 2017)

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.