टैम्परमॉन्की के साथ अपने ब्राउज़र में निरीक्षण तत्व परिवर्तन को स्थायी कैसे बनाएं

आपके वेब ब्राउज़र पर इंस्पेक्ट एलीमेंट सुविधा एक डेवलपर टूल है जो आपको HTML, CSS और JavaScript सहित किसी वेबसाइट के फ्रंट-एंड पहलुओं को संशोधित करने और अस्थायी परिवर्तन करने की सुविधा देता है। आप इंस्पेक्ट एलीमेंट के साथ और भी बहुत कुछ कर सकते हैं। हालाँकि, ताज़ा करने के बाद सभी परिवर्तन खो जाते हैं।

लेकिन कभी-कभी, आप परिवर्तनों को लंबे समय तक रखना चाह सकते हैं या उपयोगकर्ता अनुभव को बढ़ाने के लिए अतिरिक्त कार्यक्षमताएँ जोड़ना चाह सकते हैं। इंस्पेक्ट एलीमेंट परिवर्तनों को स्थायी बनाने का एक तरीका टैम्परमॉन्की एक्सटेंशन का उपयोग करना है। यह आपको वेब पेजों पर कस्टम स्क्रिप्ट जोड़ने की सुविधा देता है, जिससे परिवर्तन आपकी स्थानीय मशीन पर स्थायी हो जाते हैं।

आइए देखें कि आपके स्थानीय ब्राउज़र पर निरीक्षण तत्व परिवर्तनों को स्थायी बनाने के लिए टैम्परमॉन्की का उपयोग कैसे करें।

टैम्परमॉन्की क्या है और आप इसे कैसे स्थापित कर सकते हैं?

टैम्परमॉन्की, एक यूजरस्क्रिप्ट प्रबंधक, एक लोकप्रिय ब्राउज़र एक्सटेंशन है जो क्रोम, एज, ओपेरा नेक्स्ट और फ़ायरफ़ॉक्स सहित सभी प्रमुख वेब ब्राउज़रों के लिए उपलब्ध है। यह आपको वेब पेजों को ठीक करने या बढ़ाने के लिए उन्हें संशोधित करने के लिए कस्टम और मौजूदा उपयोगकर्तास्क्रिप्ट बनाने और चलाने की सुविधा देता है।

इसमें अन्य टैम्परमॉन्की उपयोगकर्ताओं द्वारा बनाई गई एक उपयोगकर्तास्क्रिप्ट लाइब्रेरी भी शामिल है। उदाहरण के लिए, आप स्थानीय YouTube डाउनलोडर उपयोगकर्तास्क्रिप्ट का उपयोग कर सकते हैं टैम्परमॉन्की का उपयोग करके यूट्यूब वीडियो डाउनलोड करें या लॉग इन किए बिना फ़्लैग किए गए YouTube वीडियो देखें.

जैसे ही निर्दिष्ट वेब पेज लोड होता है, एक्सटेंशन सहेजे गए उपयोगकर्तास्क्रिप्ट को चलाता है, इस प्रकार इच्छित परिवर्तन स्थायी दिखाई देते हैं।

इससे पहले कि हम कोई स्क्रिप्ट लिखना शुरू करें, आपको टैम्परमॉन्की इंस्टॉल करना होगा। तो, आइए एक्सटेंशन इंस्टॉल करना शुरू करें:

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

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

एक बार इंस्टॉल हो जाने पर, आप किसी भी वेबसाइट में इच्छित परिवर्तन करने के लिए जावास्क्रिप्ट का उपयोग करके कस्टम उपयोगकर्तास्क्रिप्ट लिखना शुरू कर सकते हैं। कहने की जरूरत नहीं है, आपको यूजरस्क्रिप्ट लिखने और टैम्परमॉन्की का उपयोग करके संशोधन करने के लिए HTML, CSS और JavaScript की बुनियादी समझ की आवश्यकता होगी।

टैम्परमॉन्की की क्षमताओं को प्रदर्शित करने के लिए, हम आपके व्हाट्सएप संपर्कों के साथ लेख लिंक साझा करने के लिए व्हाट्सएप शेयर बटन जोड़ने के लिए एक स्क्रिप्ट लिखेंगे।

वेबसाइट तत्व संशोधन करने से पहले क्या विचार करें

किसी भी वेबसाइट में संशोधन करते समय, तृतीय-पक्ष जावास्क्रिप्ट का उपयोग करने पर उनकी नीतियों का सम्मान करना महत्वपूर्ण है। किसी भी वेबसाइट पर उपयोगकर्तास्क्रिप्ट को मनमाने ढंग से चलाने का प्रयास न करें, खासकर जब आप संवेदनशील डेटा के साथ काम कर रहे हों।

जबकि टैम्परमॉन्की आपको उपस्थिति को संशोधित करने और वेबसाइट में कार्यक्षमता जोड़ने में मदद करता है, सभी परिवर्तन केवल आपके ब्राउज़र में स्थानीय रूप से दिखाई देते हैं और स्रोत को प्रभावित नहीं करते हैं।

टैम्परमॉन्की के साथ शुरुआत करना

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

नई स्क्रिप्ट बनाने के लिए, क्लिक करें एक्सटेंशन ब्राउज़र टूलबार में आइकन और चयन करें टेम्परमॉन्की. अगला, चयन करें एक नई स्क्रिप्ट बनाएं. इससे टैम्परमॉन्की डैशबोर्ड में एक स्क्रिप्ट एडिटर खुल जाएगा।

डिफ़ॉल्ट टैम्परमॉन्की हेडर या मेटाडेटा टिप्पणियाँ इस तरह दिखती हैं:

// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match http://example.com/*
// @grantnone
// ==/UserScript==
(function() {
'use strict';
// Your code here...
})();

इन मेटाडेटा टिप्पणियों में उपयोगकर्तास्क्रिप्ट के नाम, इच्छित उद्देश्य और अनुमतियों के बारे में महत्वपूर्ण जानकारी शामिल होती है और टैम्परमॉन्की को बताती है कि स्क्रिप्ट को कब निष्पादित करना है।

इस गाइड के लिए, हम इस पर ध्यान केंद्रित करेंगे @मिलान निर्देश, उर्फ ​​मेटाडेटा दायर किया गया। टैम्परमॉन्की इस निर्देश का उपयोग यह सुनिश्चित करने के लिए करता है कि उपयोगकर्तास्क्रिप्ट केवल एक विशिष्ट वेबसाइट या वेब पेजों पर लागू होती है। इस उदाहरण में, निम्नलिखित उपयोगकर्तास्क्रिप्ट केवल example.com (अपनी आवश्यकता के अनुसार वेबसाइट URL बदलें) और उसके सभी पृष्ठों पर चलेगी।

व्हाट्सएप शेयर बटन जोड़ने के लिए एक यूजरस्क्रिप्ट लिखना

प्रत्येक MakeUseOf लेख के अंत में, आपको व्हाट्सएप को छोड़कर विभिन्न सोशल मीडिया प्लेटफार्मों के लिए एक शेयर विजेट मिलेगा। हालाँकि आप यूआरएल को कॉपी और पेस्ट कर सकते हैं, लेकिन यदि आप अक्सर अपने व्हाट्सएप ग्रुप पर लेख साझा करते हैं तो व्हाट्सएप शेयर बटन उपयोगी होता है।

आप लेख के अंत में व्हाट्सएप शेयर बटन जोड़ने के लिए टैम्परमॉन्की में एक यूजरस्क्रिप्ट बना सकते हैं। हम बटन को मौजूदा शेयर विजेट में एकीकृत करेंगे जो आपको वेब पेज यूआरएल को अपने व्हाट्सएप संपर्कों के साथ साझा करने की अनुमति देगा।

आइए एक बुनियादी व्हाट्सएप शेयर बटन बनाने से शुरुआत करें।

//create a WhatsApp button
const Whatsapp_btn = document.createElement('button');
Whatsapp_btn.textContent = 'Share';

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

//add styling to the button
Whatsapp_btn.style.backgroundColor = '#075E54';
Whatsapp_btn.style.color = 'white';
Whatsapp_btn.style.border = 'none';
Whatsapp_btn.style.borderRadius = '5px';
Whatsapp_btn.style.padding = '10px';

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

हालाँकि, इस उदाहरण में, हमारे पास पहले से ही प्रत्येक लेख के अंत में एक साझाकरण विजेट है। इसलिए, इस शेयर बटन को विजेट का हिस्सा बनाना आदर्श है।

ऐसा करने के लिए, हम मूल कंटेनर को ढूंढने के लिए मौजूदा शेयर विजेट का निरीक्षण करेंगे जिसमें उपयोगकर्तास्क्रिप्ट में इसे ढूंढने के लिए साझाकरण तत्व शामिल हैं। वेब पेज पर, दबाएँ Ctrl+Shift+C निरीक्षण तत्व खोलने के लिए. इसके बाद, इसका निरीक्षण करने के लिए पृष्ठ पर शेयर विजेट तत्व का चयन करें।

आप देखेंगे कि यह एक है वर्ग नाम के साथ तत्व "नीचे साझा करना”. आप इसका उपयोग करके इस तत्व का चयन कर सकते हैं क्वेरी चयनकर्ता आपकी उपयोक्तास्क्रिप्ट में विधि।

const sharingDiv = document.querySelector ('div.sharing.bottom');

तत्व का चयन करने के बाद, आइए इसमें शेयर बटन को चाइल्ड के रूप में डालें:

if (sharingDiv) {
 sharingDiv.appendChild(Whatsapp_btn);
}

प्रेस Ctrl+एस स्क्रिप्ट को सहेजने के लिए. यदि आप पृष्ठ को पुनः लोड करते हैं, तो आपको मौजूदा शेयर विजेट में डाला गया एक शेयर बटन दिखाई देगा। लेकिन इस पर क्लिक करने से कुछ नहीं होगा.

बटन को काम करने के लिए, हम वर्तमान पृष्ठ के यूआरएल के आधार पर एक व्हाट्सएप शेयर यूआरएल उत्पन्न करने के लिए एक फ़ंक्शन बनाएंगे। पेज यूआरएल वापस करने के लिए आप Location.href का उपयोग कर सकते हैं।

functiongenerateWALink() {
 const pageURL = encodeURIComponent(window.location.href);
 return`https://api.whatsapp.com/send? text=${pageURL}`;
}

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

Whatsapp_btn.addEventListener('click', () => {
 const whatsappURL = generateWALink();
 window.open(whatsappURL, '_blank');
});

यूजरस्क्रिप्ट को सहेजें और चलाएँ

एक बार जब आपके पास उपयोक्तास्क्रिप्ट तैयार हो जाए, तो दबाएँ Ctrl+एस परिवर्तनों को सहेजने के लिए. खोलें स्थापित उपयोगकर्तास्क्रिप्ट आपके ब्राउज़र पर इंस्टॉल की गई सभी उपयोगकर्तास्क्रिप्ट देखने के लिए टैम्परमॉन्की में टैब करें।

उपयोगकर्तास्क्रिप्ट को क्रियाशील देखने के लिए, लक्ष्य वेब पेज खोलें। आपको हरा रंग दिखाई देगा शेयर करना बटन। बटन पर क्लिक करने से आपको व्हाट्सएप डेस्कटॉप खोलने के लिए संकेत मिलेगा, बशर्ते आपके पास ऐप इंस्टॉल हो। फिर आप लेख लिंक भेजने के लिए सूची से संपर्क का चयन कर सकते हैं।

आप अधिक संवर्द्धन जोड़ने के लिए स्क्रिप्ट को और संशोधित कर सकते हैं। उदाहरण के लिए, आप बटन पर व्हाट्सएप आइकन प्रदर्शित कर सकते हैं या InsertAfter() फ़ंक्शन का उपयोग करके उसका स्थान बदल सकते हैं।

आप टैम्परमॉन्की डैशबोर्ड से अलग-अलग उपयोगकर्तास्क्रिप्ट को सक्षम, अक्षम या संपादित कर सकते हैं। वैकल्पिक रूप से, सभी सक्रिय उपयोगकर्तास्क्रिप्ट को एक साथ अक्षम करने के लिए टूलबार में टैम्परमॉन्की आइकन पर क्लिक करें।

टैम्परमॉन्की का उपयोग करके निरीक्षण तत्व परिवर्तन को स्थायी बनाना

टैम्परमॉन्की उपलब्ध कई उपयोगकर्तास्क्रिप्ट प्रबंधकों में से एक है जो आपको अपने ब्राउज़िंग अनुभव को बढ़ाने के लिए वेब पेजों को संशोधित करने की अनुमति देता है। छोटे-छोटे संशोधन बेहतर पहुंच में सहायता कर सकते हैं और आपकी पसंदीदा वेबसाइट से जुड़ी छोटी-मोटी परेशानियों को ठीक कर सकते हैं।

इससे पहले कि आप कोई स्क्रिप्ट लिखना शुरू करें, जांच लें कि क्या अन्य उपयोगकर्ताओं की कोई स्क्रिप्ट पहले से मौजूद है। हालाँकि, दुर्भावनापूर्ण कोड से बचने के लिए अज्ञात स्रोतों से तृतीय-पक्ष उपयोगकर्तास्क्रिप्ट स्थापित करने से सावधान रहें।