🎦 👩🏽‍⚖️ 🤰🏻 कोणीय सीएलआई के साथ क्रोम एक्सटेंशन विकसित करें 🏾 🌷 🎄

मैं लंबे समय से क्रोम के लिए एक्सटेंशन विकसित कर रहा हूं और इस दौरान मैं क्रोम-एक्सटेंशन शेल में एक पूर्ण-विकसित कोणीय अनुप्रयोग के लिए Greasemonkey उपयोगकर्ता स्क्रिप्ट से सभी तरह से चला गया हूं। मेरा कार्य यह है कि मैं अपनी कार्यक्षमता को बदलने और इन साइटों पर कुछ प्रक्रियाओं को स्वचालित करने के लिए कुछ पहले से कार्यशील साइटों को पैच कर दूंगा। कभी-कभी मेरा एप्लिकेशन बड़े पैमाने पर बढ़ता है और प्लेन-जेएस एक्सटेंशन का समर्थन करना मुश्किल हो जाता है (एप्लिकेशन, सीआरयूडी कार्यक्षमता, आदि में बहुत सारी सेटिंग्स हैं)। और फिर एंगुलर बचाव के लिए आता है।

इस लेख में, मैं आपको बताता हूं कि मैंने क्रोम एक्सटेंशन और एंगुलर सीएलआई के साथ कैसे दोस्त बनाए, और विकास प्रक्रिया की स्थापना की, साथ ही मुझे किन कठिनाइयों का सामना करना पड़ा और उन्हें कैसे हल करना है।
एक नया फ़ोल्डर बनाएं और उसमें एक नया एप्लिकेशन इनिशियलाइज़ करें।

mkdir new-project cd new-project ng new frontend --routing=true --skipGit=true --style=scss --skipTests=true

विकास के चरण में, कोणीय गतिशील डायनामिक फ़ाइल उत्पन्न करता है जिसमें विकास होता है, और कार्य के परिणाम को देखने के लिए Chrome एक्सटेंशन को एक स्थिर HTML फ़ाइल खिलाया जाना चाहिए। बेशक, आप अलग से एंगुलारोव्स्क परियोजना को इकट्ठा कर सकते हैं और फिर इसके अलावा बिल्ड संस्करण का निर्माण कर सकते हैं, लेकिन यह स्वचालित रूप से होने पर सुविधाजनक होगा।

एक नया एप्लिकेशन जेनरेट करने के बाद, फ्रंटएंड फोल्डर और पैकेज पर जाएं। स्क्रिप्ट सेक्शन में फाइल करें। इस प्रोजेक्ट को बनाने के लिए एक नई स्क्रिप्ट जोड़ें।

 "developing": "ng build --watch --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"

तैनात- deploy-url और base-href ।

फिर, परियोजना की जड़ में, एक और एक्सटेंशन फ़ोल्डर बनाएं और उसमें एक्सटेंशन .js फ़ाइल बनाएं, जो हमारे एक्सटेंशन की पृष्ठभूमि स्क्रिप्ट होगी। वर्तमान परियोजना संरचना:

 | new-project/ | | extension/ | | | extension.js | | frontend/ | | | ...

सामग्री विस्तार। Js

 const ANGULAR_HTML_URL = "../../frontend/dist/frontend/index.html"; chrome.browserAction.onClicked.addListener(function () { chrome.tabs.create({ url: chrome.runtime.getURL(ANGULAR_HTML_URL) }); });

यह ब्राउज़रएशन होगा, जो हमारे कोणीय अनुप्रयोग के साथ एक नया टैब खोलेगा, जिसे इकट्ठे रूप में पहले से ही इस पथ के साथ संग्रहीत किया जाएगा।

हमारे प्रोजेक्ट में मैनिफ़ेस्ट जोड़ें

 { "manifest_version": 2, "name": "Simple Chrome Ext", "description": "Simple Chrome Extension as an example", "version": "1.00", "author": "Bogdan", "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", "background": { "persistent": true, "scripts": ["/extension/extension.js"] }, "browser_action": { "default_title": "Chrome ext" } }

अब हम अपनी परियोजना को एक विस्तार में इकट्ठा कर सकते हैं। हम क्रोम: // एक्सटेंशन / में जाते हैं , डेवलपर मोड को सक्षम करते हैं और डाउनलोड अनपैक्ड एक्सटेंशन का चयन करते हैं।

परिणाम

सुविधा यह है कि हमारे पास लगभग गर्म-पुनः लोड हो रहा है। हमने वॉच फ्लैग के साथ एनजी बिल्ड लॉन्च किया और जब कोड में बदलाव होता है, तो प्रोजेक्ट को फिर से बनाया जाएगा और जेएस फाइलों को बदल दिया जाएगा। यही है, विस्तार पृष्ठ पर, हमें केवल पृष्ठ को फिर से लोड करना होगा और सभी अपडेट उठाए जाएंगे। यह ऐड-ऑन के विकास को बहुत तेज करता है।

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

 { useHash: true }

और हम ऊपर, आधार- href पर भी निर्माण करेंगे, जिसे हमने /frontend/dist/frontend/index.html?/ के रूप में पंजीकृत किया था - अंतिम स्लैश से पहले एक प्रश्न चिह्न पर ध्यान दें। तथ्य यह है कि कुछ प्रणालियों पर, जब आप कोणीय आवेदन में लिंक पर क्लिक करते हैं, तो सब कुछ इस संकेत के बिना क्रैश हो जाता है। जाहिरा तौर पर, क्रोम इंजन के स्थिर वेब सर्वर ने URL को किसी अन्य फ़ाइल (भले ही useHash: true) के अनुरोध के रूप में बदल दिया और पृष्ठ को अपडेट करते समय इसे 404 त्रुटि लौटा दी। केवल इस संयोजन में मैं सभी प्रणालियों पर स्थिर संचालन हासिल करने में कामयाब रहा।

आइए हमारे एप्लिकेशन के पैकेज.जॉन पर वापस जाएं और एक और स्क्रिप्ट जोड़ें

 "prod": "ng build --sourceMap false --prod true --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"

यह उत्पादन संस्करण के लिए हमारे आवेदन का निर्माण करने के लिए स्क्रिप्ट होगी।

Chrome वेब स्टोर में, एक्सटेंशन वाला एक ज़िप संग्रह पोस्ट किया गया है और असेंबली को सरल बनाने के लिए मैंने इन उद्देश्यों के लिए एक स्क्रिप्ट बनाई है

update.sh

 #!/bin/bash rm -rf ./prod-build mkdir -p prod-build/frontend cd frontend npm run prod cd .. cp -R ./frontend/dist ./prod-build/frontend cp -R ./extension ./prod-build cp ./manifest.json ./prod-build zip -r prod-build{.zip,} rm -rf ./prod-build

स्रोत कोड यहां पाया जा सकता है ।

कुल: हमने सही मार्ग और एप्लिकेशन के सुविधाजनक अपडेट / निर्माण के साथ कोणीय क्रोम एक्सटेंशन के लिए एक प्री-डेवलपमेंट किट बनाई।

पुनश्च: इस तरह के / सामने / दूर / सामने / रास्ते से छुटकारा पाने के लिए, आप पर्यावरण को कॉन्फ़िगर कर सकते हैं और उत्पादन विधानसभा में पथ को अलग तरीके से निर्दिष्ट कर सकते हैं, लेकिन यह महत्वपूर्ण बिंदु नहीं है।

कोणीय सीएलआई के साथ क्रोम एक्सटेंशन विकसित करें

More articles: