जावास्क्रिप्ट के साथ टेक्स्ट-सर्च बुकमार्कलेट कैसे बनाएं

बुकमार्कलेट कर रहे हैं जावास्क्रिप्ट अनुप्रयोगों के रूप में पहुँचा जा सकता है ब्राउज़र बुकमार्क. उनका उपयोग उपयोगकर्ताओं को सक्षम करने के लिए किया जाता है विभिन्न क्रियाएं करें वेब पेजों पर। उदाहरण के लिए, FontShop द्वारा यह बुकमार्कलेट किसी भी वेब पेज पर FontShop वेब फोंट का पूर्वावलोकन करने के लिए है.

इस लेख में, हम यह देखने जा रहे हैं कि यह कितना त्वरित और आसान है एक बुकमार्कलेट को मनाना एक बनाकर विकीवंड करता है (बेहतर दिखने वाला विकिपीडिया) खोज किसी भी वेब पेज पर चयनित पाठ के लिए.

बुकमार्क कैसे काम करते हैं

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

चूँकि बुकमार्क अनिवार्य रूप से हैं जावास्क्रिप्ट कोड के सेट, वे छोटे जावास्क्रिप्ट ज्ञान के साथ, व्यक्तिगत उपयोग के लिए या अपने उपयोगकर्ताओं के लिए इसे प्रदान करने के लिए आसान हैं, जैसे कि वर्डप्रेस अपने प्रेस पुस्तक पुस्तिका के साथ करता है।.

जावास्क्रिप्ट कोड के साथ आरंभ करें

URL संरचना अंग्रेजी भाषा के लेख के लिए विकिवंड का उपयोग होता है https://www.wikiwand.com/en/articleTitle. हमें एक स्क्रिप्ट लिखने की जरूरत है जो कि किस URL के विकिवैंड पेज पर जाती है उपयोगकर्ता द्वारा चयनित स्ट्रिंग के साथ समाप्त होता है - चयनित पाठ की आवश्यकता होगी के स्थान पर रखा जाए लेख का शीर्षक.

पहले हम पाठ को पकड़ें उपयोगकर्ता ने निम्नलिखित कोड के साथ पृष्ठ पर चयन किया है:

 getSelection ()। toString () 

हमारे लिए आवश्यक है देना वस्तु द्वारा लौटाया गया getSelection () एक स्ट्रिंग के रूप में का उपयोग करके तार() विधि, इसे बनाने के लिए चयनित पाठ आउटपुट.

अगला, हमें करने की आवश्यकता है एक यात्रा करें विकीखंड लेख पृष्ठ पर। हम निम्नलिखित तर्क का उपयोग करके इसे प्राप्त करेंगे, जहां NEWURL यह होंगे विकिवंड लेख पृष्ठ का URL (जिसमें अंत में चयनित स्ट्रिंग शामिल होगी):

 location.href = newURL 

जब हम इन दो कोड स्निपेट को एक साथ रखते हैं, तो हम निम्नलिखित स्क्रिप्ट के साथ समाप्त होते हैं:

 location.href = 'https://www.wikiwand.com/en/'+getSelection () .toString () 

अब हमें केवल जोड़ना है जावास्क्रिप्ट: सामने करने के लिए प्रोटोकॉल, और हम है अंतिम कोड हम अपने बुकमार्कलेट में उपयोग करेंगे:

 // बिना लाइन ब्रेक के एक लाइन में जोड़ें जावास्क्रिप्ट: location.href = 'https://www.wikiwand.com/en/' + getSelection ()। toString ()। प्रतिस्थापन (/ \ n / g, '% 20' ) 

वैकल्पिक की जगह (/ \ N / जी, '% 20') अतं मै किसी भी नई पंक्ति वर्ण को प्रतिस्थापित करता है (\ n) लिखित मे एक एकल अंतरिक्ष चरित्र के साथ (20%).

जावास्क्रिप्ट कोड तैयार है। ध्यान दें कि कोड रखा जाना चाहिए एक लाइन में कोई भी लाइन नहीं टूटती है, बाद में यह हो जाएगा पाठ इनपुट फ़ील्ड में जोड़ा गया.

बुकमार्क बनाएँ

अपने ब्राउज़र की बुकमार्क विंडो खोलें, और एक नया बुकमार्क जोड़ें:

• फ़ायरफ़ॉक्स: Ctrl + shift + B / cmd + shift + B दबाएं, "बुकमार्क टूलबार" पर राइट-क्लिक करें और नया बुकमार्क चुनें।.
• क्रोम: Ctrl + Shift + O / cmd + alt + B दबाएं, "बुकमार्क बार" पर राइट-क्लिक करें, और "जोड़ें ... जोड़ें" का चयन करें.

URL फ़ील्ड में जावास्क्रिप्ट कोड को कॉपी-पेस्ट करें पहले से। एक बार बुकमार्क बनाने के बाद यह उपयोग के लिए तैयार है; किसी भी वेब पेज पर जाएं, एक शब्द का चयन करें आप विकीवंड में खोज करना चाहते हैं, और बुकमार्क क्लिक करें - विकिवंड लेख पृष्ठ एक बार में खुलेगा.

त्वरित ऐक्सेस

बुकमार्क के लिए हर बार बुकमार्क मेनू तक पहुंचने के बजाय, आप चुन सकते हैं इसे सीधे प्रदर्शित करें त्वरित पहुँच के लिए अपने ब्राउज़र में.

• फ़ायरफ़ॉक्स: शीर्ष मेनू पट्टी में "देखें> टूलबार" पर क्लिक करें, और "बुकमार्क टूलबार" चुनें.
• क्रोम: Ctrl + shift + B / cmd + shift + B दबाएं.

एक बुकमार्क लिंक बनाएं

आप अपने बुकमार्क को वेबसाइट पर जोड़ सकते हैं हाइपरलिंक के रूप में के रूप में अच्छी तरह से, जो आगंतुकों बुकमार्क कर सकते हैं या तो बुकमार्क टूलबार पर लिंक को ड्रैग-एंड-ड्रॉप करके, या लिंक को राइट-क्लिक करके बुकमार्क करने के विकल्प का चयन करें.

अपने बुकमार्क को हाइपरलिंक में बदलने के लिए, एक बनाएँ बुकमार्क स्क्रिप्ट के साथ HTML टैग इसके मूल्य के रूप में href गुण:

   विकिवंड सर्च बुकमार्क  

अलग से बुकमार्क कैसे स्टोर करें

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

फ़ाइल myscript.js मर्जी मुख्य जावास्क्रिप्ट कोड घर बुकमार्कलेट के लिए, और आपको निम्नलिखित कोड जोड़ना होगा बुकमार्क URL के रूप में (या तो ब्राउज़र के बुकमार्क बार पर, या के मान के रूप में href HTML फ़ाइल में विशेषता):

 // बिना लाइन ब्रेक के एक लाइन में जोड़ें जावास्क्रिप्ट: () (> = (डॉक्यूमेंट) let s = createElement ('script'); s.src = 'myscript.js'; head.appendCildild (s); ) (); 

ऊपर कोड स्निपेट है एक सेल्फ इनवोकेशन एरो फंक्शन में लिपटे हुए, और ECMAScript 6 की विशेषताओं का उपयोग करता है, जैसे कि चलो कोड लंबाई कम करने के लिए कीवर्ड। यह एक जोड़ता है > टैग की ओर इशारा करते हुए myscript.js के लिए फ़ाइल दस्तावेज़ का अनुभाग जब उपयोगकर्ता बुकमार्कलेट पर क्लिक करता है (ध्यान दें कि आपको इसके लिए एक पूर्ण पथ का उपयोग करने की आवश्यकता हो सकती है myscript.js फाइल).