Chrome एक्सटेंशन से जावास्क्रिप्ट वेब पृष्ठों तक पहुँचें

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

लेकिन एक बात यह है कि सामग्री स्क्रिप्ट तंत्र आपको वेब पेज के जावास्क्रिप्ट पर्यावरण तक पहुंचने की अनुमति नहीं देता है।


जब मैंने vk.com से last.fm तक म्यूज़िक सुनने के लिए एक विस्तार किया, तो मैंने खिलाड़ी के राज्य की निगरानी के लिए पहले खिलाड़ी के DOM पार्सिंग का उपयोग किया) यह बहुत ही भयानक था, और लेआउट में पहले बदलाव के बाद, सब कुछ टूट गया। इसलिए, मुझे कुछ अधिक विश्वसनीय के साथ आना पड़ा। इंटरनेट खोजों ने एक वेब पेज में आपके कोड को एम्बेड करने के लिए एक सरल और प्रतीत होता है स्पष्ट तंत्र का नेतृत्व किया है:

1. स्क्रिप्ट की सामग्री से हम पृष्ठ तत्व "स्क्रिप्ट" के डोम ट्री में इसके कोड के साथ बनाते हैं।

//  vk_inner   vk.com var script=document.createElement('script'); script.type='text/javascript'; script.src=chrome.extension.getURL("js/vk_inner.js"); 

2. कोड उन कार्यों को पैच करता है जिनके साथ आपको काम करने की आवश्यकता होती है। पैचिंग के लिए, हम AddCallListener विधि का उपयोग करते हैं, जो इंटरनेट पर कहीं पाया जाता है। यह उद्देश्य समारोह की जगह लेता है, और लॉन्च से पहले और बाद में हैंडलर को कॉल करता है:

 Function.addCallListener = function(func, callbacks) { var successNumber = 0, errorNumber = 0, name = func.name; return function() { var args = [].slice.call(arguments); var result, error; var props = { args: args, self: this, name: name } callbacks.before && callbacks.before(props); try { result = func.apply(this, arguments); props.successNumber = ++successNumber; props.result = result; props.status = 'success'; callbacks.success && callbacks.success(props); } catch (e) { props.errorNumber = ++errorNumber; props.error = e; props.status = 'error'; callbacks.error && callbacks.error(props); } callbacks.after && callbacks.after(props); return result; } } 

3. हम आवश्यक कार्यों को पैच करते हैं। Vk.com के मामले में, यह AudioPlayer.onPlayProgress फ़ंक्शन है, इसे प्लेबैक के दौरान हर सेकंड कहा जाता है:

 var ARTIST_NUM = 5; var TITLE_NUM = 6; var artistElem = document.getElementById('vkScrobblerArtist'); var titleElem = document.getElementById('vkScrobblerTrackTitle'); //    audioPlayer.onPlayProgress = Function.addCallListener(audioPlayer.onPlayProgress, { after: function(props) { //    artistElem.innerHTML = audioPlayer.lastSong[ ARTIST_NUM ]; titleElem.innerHTML = audioPlayer.lastSong[ TITLE_NUM ]; } }); 

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