दिलचस्प पोस्ट
पुरानी सीएसवी फ़ाइल अजगर के लिए नई पंक्ति जोड़ें mysql, कॉलम के नामों के माध्यम से दोहराएं मार्शमॉलो एंड्रॉइड में निर्देशिका निर्माण काम नहीं कर रहा है java.lang.RuntimeException FacesContext नहीं मिल सकता है जावा मूल पद्धति स्रोत कोड जावास्क्रिप्ट में पृष्ठभूमि कार्य निष्पादित करें क्या सबसे बड़ा आर-पकड़चा है जिसे आपने पार किया है? node.js वैश्विक चर? मूल्य को एक रूप से दूसरे में पास करें रेडियन के बजाय डिग्री का उपयोग करने के लिए मैं पाप कैसे कर सकता हूँ, क्योंकि, और तन? फ़ाइल सिस्टम के विरोध में डेटाबेस में एक फ़ाइल को संग्रहीत करना? सी में बाउंड से बाहर सर्रे इंडेक्स सी / सी + पार्सर / विश्लेषक बनाने के लिए अच्छे उपकरण अनुवाद के सापेक्ष सीएसएस प्रदर्शन (0) अवरोधन और गैर अवरुद्ध उपप्रोसेस कॉल

किसी सामग्री स्क्रिप्ट का उपयोग करके पृष्ठ संदर्भ में कोड डालें

मैं सीख रहा हूं कि क्रोम एक्सटेंशन कैसे बनाएं मैंने अभी यूट्यूब की घटनाओं को पकड़ने के लिए एक को विकसित करना शुरू कर दिया है। मैं इसे यूट्यूब फ्लैश प्लेयर के साथ प्रयोग करना चाहता हूं (बाद में मैं इसे HTML5 के साथ संगत बनाने की कोशिश करूंगा)।

manifest.json:

{ "name": "MyExtension", "version": "1.0", "description": "Gotta catch Youtube events!", "permissions": ["tabs", "http://*/*"], "content_scripts" : [{ "matches" : [ "www.youtube.com/*"], "js" : ["myScript.js"] }] } 

myScript.js:

 function state() { console.log("State Changed!"); } var player = document.getElementById("movie_player"); player.addEventListener("onStateChange", "state"); console.log("Started!"); 

समस्या यह है कि कंसोल मुझे "आरंभ" देता है ! , लेकिन कोई "राज्य बदल गया है!" जब मैं YouTube वीडियो चलाता / रोकता हूं

जब यह कोड कंसोल में डाल दिया जाता है, तो यह काम करता है मैं क्या गलत कर रहा हूं?

वेब के समाधान से एकत्रित समाधान "किसी सामग्री स्क्रिप्ट का उपयोग करके पृष्ठ संदर्भ में कोड डालें"

सामग्री स्क्रिप्ट को एक "अलग दुनिया" पर्यावरण में निष्पादित किया जाता है आपको अपने state() पद्धति को पेज में ही इंजेक्ट करना होगा।

जब आप स्क्रिप्ट में chrome.* API में से एक का उपयोग करना चाहते हैं, तो आपको एक विशेष ईवेंट हैंडलर को कार्यान्वित करना होगा, जैसा कि इस उत्तर में वर्णित है: क्रोम एक्सटेंशन – जीमेल के मूल संदेश को पुनः प्राप्त करना

अन्यथा, यदि आपको chrome.* का उपयोग करने की ज़रूरत नहीं है chrome.* एपीआई, मैं जोर से एक <script> टैग जोड़कर पृष्ठ में अपने सभी जेएस कोड को इंजेक्ट करने की सलाह देता हूं:

विषय – सूची

  • विधि 1: किसी अन्य फ़ाइल को इंजेक्ट करें
  • विधि 2: एम्बेडेड कोड इंजेक्षन करें
  • विधि 2b: फ़ंक्शन का उपयोग करना
  • विधि 3: इनलाइन ईवेंट का उपयोग करना
  • इंजेक्शन कोड में डायनामिक मान

विधि 1: किसी अन्य फ़ाइल को इंजेक्ट करें

जब आपके पास बहुत सी कोड हैं तो यह सबसे आसान / सर्वोत्तम विधि है अपने एक्सटेंशन में एक फाइल में अपना वास्तविक जेएस कोड शामिल करें, script.js कहते हैं। फिर अपनी सामग्री स्क्रिप्ट को निम्नानुसार बताएं (समझाया गया है: Google Chome "एप्लिकेशन शॉर्टकट" कस्टम जावास्क्रिप्ट ):

 var s = document.createElement('script'); // TODO: add "script.js" to web_accessible_resources in manifest.json s.src = chrome.extension.getURL('script.js'); s.onload = function() { this.remove(); }; (document.head || document.documentElement).appendChild(s); 

नोट: यदि आप इस पद्धति का उपयोग करते हैं, तो "web_accessible_resources" अनुभाग ( उदाहरण ) में इंजेक्शन वाली स्क्रिप्ट.जेएस फ़ाइल को "web_accessible_resources" । यदि आप नहीं करते हैं, तो क्रोम आपकी स्क्रिप्ट को लोड करने और कंसोल में निम्न त्रुटि प्रदर्शित करने से इनकार करेगा:

क्रोम-एक्सटेंशन का लोड अस्वीकार: // [EXTENSIONID] /script.js एक्सटेंशन के बाहर पृष्ठों द्वारा लोड किए जाने के लिए संसाधनों को web_accessible_resources manifest key में सूचीबद्ध किया जाना चाहिए।

विधि 2: एम्बेडेड कोड इंजेक्षन करें

यह विधि उपयोगी है जब आप जल्दी से कोड का एक छोटा सा टुकड़ा चलाने के लिए चाहते हैं (यह भी देखें: क्रोम एक्सटेंशन के साथ फेसबुक हॉटकीज़ को अक्षम कैसे करें? )।

 var actualCode = `// Code here. // If you want to use a variable, use $ and curly braces. // For example, to use a fixed random number: var someFixedRandomValue = ${ Math.random() }; // NOTE: Do not insert unsafe variables in this way, see below // at "Dynamic values in the injected code" `; var script = document.createElement('script'); script.textContent = actualCode; (document.head||document.documentElement).appendChild(script); script.remove(); 

नोट: टेम्पलेट शाब्दिक केवल क्रोम 41 और इसके बाद के संस्करण में समर्थित हैं यदि आप क्रोम 40- में विस्तार का काम करना चाहते हैं, तो इसका प्रयोग करें:

 var actualCode = ['/* Code here. Example: */' + 'alert(0);', '// Beware! This array have to be joined', '// using a newline. Otherwise, missing semicolons', '// or single-line comments (//) will mess up your', '// code ----->'].join('\n'); 

विधि 2b: फ़ंक्शन का उपयोग करना

कोड का एक बड़ा हिस्सा, स्ट्रिंग का उद्धरण संभव नहीं है। एक सरणी का उपयोग करने के बजाय, एक फ़ंक्शन का उपयोग किया जा सकता है, और स्ट्रैड किया जा सकता है:

 var actualCode = '(' + function() { // All code is executed in a local scope. // For example, the following does NOT overwrite the global `alert` method var alert = null; // To overwrite a global variable, prefix `window`: window.alert = null; } + ')();'; var script = document.createElement('script'); script.textContent = actualCode; (document.head||document.documentElement).appendChild(script); script.remove(); 

यह विधि काम करती है, क्योंकि स्ट्रिंग पर + ऑपरेटर और फ़ंक्शन सभी ऑब्जेक्ट्स को किसी स्ट्रिंग में कनवर्ट करते हैं। अगर आप कोड का एक से अधिक बार उपयोग करने का इरादा रखते हैं, तो कोड पुनरावृत्ति से बचने के लिए फ़ंक्शन बनाने के लिए बुद्धिमान है। एक क्रियान्वयन ऐसा दिख सकता है:

 function injectScript(func) { var actualCode = '(' + func + ')();' ... } injectScript(function() { alert("Injected script"); }); 

नोट: चूंकि फ़ंक्शन को सीरियल कर दिया गया है, मूल दायरा और सभी बाध्य गुण खो गए हैं!

 var scriptToInject = function() { console.log(typeof scriptToInject); }; injectScript(scriptToInject); // Console output: "undefined" 

विधि 3: इनलाइन ईवेंट का उपयोग करना

कभी-कभी, आप तुरंत कुछ कोड चला सकते हैं, उदाहरण के लिए <head> तत्व बनने से पहले कुछ कोड चलाने के लिए। यह textContent साथ एक <script> टैग डालने के द्वारा किया जा सकता है (विधि textContent बी देखें)।

एक वैकल्पिक, लेकिन इनलाइन ईवेंट का उपयोग करने की अनुशंसा नहीं की जाती है इसकी अनुशंसा नहीं की जाती है क्योंकि अगर पृष्ठ एक सामग्री सुरक्षा नीति को परिभाषित करता है जो इनलाइन स्क्रिप्ट को प्रतिबंधित करता है, तो इनलाइन ईवेंट श्रोताओं को अवरुद्ध कर दिया गया है। विस्तार से अंतःक्षिप्त इनलाइन स्क्रिप्ट, दूसरी तरफ, अभी भी चलें। यदि आप अभी भी इनलाइन इवेंट्स का उपयोग करना चाहते हैं, तो यह कैसे है:

 var actualCode = '// Some code example \n' + 'console.log(document.documentElement.outerHTML);'; document.documentElement.setAttribute('onreset', actualCode); document.documentElement.dispatchEvent(new CustomEvent('reset')); document.documentElement.removeAttribute('onreset'); 

नोट: इस पद्धति का मानना ​​है कि reset ईवेंट को संभालते हुए कोई अन्य वैश्विक ईवेंट श्रोताओं नहीं हैं। अगर वहां है, तो आप अन्य वैश्विक घटनाओं में से एक भी चुन सकते हैं। बस जावास्क्रिप्ट कंसोल (एफ 12) खोलें, document.documentElement.on टाइप document.documentElement.on , और उपलब्ध घटनाओं को चुनें।

इंजेक्शन कोड में डायनामिक मान

कभी-कभी, आपको इंजेक्शन फ़ंक्शन के लिए एक मनमाना चर को पारित करने की आवश्यकता होती है। उदाहरण के लिए:

 var GREETING = "Hi, I'm "; var NAME = "Rob"; var scriptToInject = function() { alert(GREETING + NAME); }; 

इस कोड को इंजेक्षन करने के लिए, आपको आवेश को अनाम फ़ंक्शन के तर्क के रूप में पास करना होगा। सही ढंग से इसे लागू करने के लिए सुनिश्चित करें! निम्नलिखित कार्य नहीं करेगा:

 var scriptToInject = function (GREETING, NAME) { ... }; var actualCode = '(' + scriptToInject + ')(' + GREETING + ',' + NAME ')'; // The previous will work for numbers and booleans, but not strings. // To see why, have a look at the resulting string: var actualCode = "(function(GREETING, NAME) {...})(Hi I'm,Rob)"; // ^^^^^^ ^^^ No string literals! 

तर्क को पास करने से पहले JSON.stringify का उपयोग करना है। उदाहरण:

 var actualCode = '(' + function(greeting, name) { ... } + ')(' + JSON.stringify(GREETING) + ',' + JSON.stringify(NAME) + ')'; 

यदि आपके पास कई चर हैं, तो एक बार JSON.stringify का उपयोग करने के लिए उपयुक्त है, पठनीयता में सुधार करने के लिए, निम्नानुसार है:

 ... } + ')(' + JSON.stringify([arg1, arg2, arg3, arg4]) + ')'; 

एकमात्र वस्तु लापता रो डब्लू के बेहतरीन उत्तर से छिपा हुआ है कि इंजेक्शन वाली स्क्रिप्ट से सामग्री स्क्रिप्ट पर कॉल कैसे करें और इसके विपरीत (विशेषकर अगर आपके पास ऐसी चीजें हैं जो स्ट्रैड नहीं की जा सकतीं)।

या तो इंजेक्ट या आपकी सामग्री स्क्रिप्ट में एक ईवेंट श्रोता जोड़ें:

 document.addEventListener('yourCustomEvent', function (e) { var data=e.detail; console.log("received "+data); }); 

दूसरी तरफ (सामग्री या इंजेक्शन स्क्रिप्ट) ईवेंट को कॉल करें:

 var data="anything"; // updated: this works with Chrome 30: var evt=document.createEvent("CustomEvent"); evt.initCustomEvent("yourCustomEvent", true, true, data); document.dispatchEvent(evt); // the following stopped working in Chrome 30 (Windows), detail was // not received in the listener: // document.dispatchEvent(new CustomEvent('yourCustomEvent', { detail: data })); 

मुझे लोड लिपियों के ऑर्डर की समस्या का भी सामना करना पड़ा, जो कि लिपियों की अनुक्रमिक लोडिंग के माध्यम से हल किया गया था। लोडिंग रोब डब्ल्यू के उत्तर पर आधारित है।

 function scriptFromFile(file) { var script = document.createElement("script"); script.src = chrome.extension.getURL(file); return script; } function scriptFromSource(source) { var script = document.createElement("script"); script.textContent = source; return script; } function inject(scripts) { if (scripts.length === 0) return; var otherScripts = scripts.slice(1); var script = scripts[0]; var onload = function() { script.parentNode.removeChild(script); inject(otherScripts); }; if (script.src != "") { script.onload = onload; document.head.appendChild(script); } else { document.head.appendChild(script); onload(); } } 

उपयोग का उदाहरण होगा:

 var formulaImageUrl = chrome.extension.getURL("formula.png"); var codeImageUrl = chrome.extension.getURL("code.png"); inject([ scriptFromSource("var formulaImageUrl = '" + formulaImageUrl + "';"), scriptFromSource("var codeImageUrl = '" + codeImageUrl + "';"), scriptFromFile("EqEditor/eq_editor-lite-17.js"), scriptFromFile("EqEditor/eq_config.js"), scriptFromFile("highlight/highlight.pack.js"), scriptFromFile("injected.js") ]); 

दरअसल, मैं जेएस को नया हूँ, इसलिए मुझे बेहतर तरीके से पिंग करने में संकोच न करें।

सामग्री स्क्रिप्ट में, मैं सिर पर स्क्रिप्ट टैग जोड़ता हूं जो एक 'ऑन्मेसेज' हैंडलर को जोड़ता है, मैं उपयोग करने वाले हैंडलर के अंदर, कोड निष्पादित करने के लिए eval। बूथ सामग्री स्क्रिप्ट में मैं ऑनमैसेज हैंडलर का भी उपयोग करता हूं, इसलिए मुझे दो तरह से संचार मिलता है। क्रोम डॉक्स

 //Content Script var pmsgUrl = chrome.extension.getURL('pmListener.js'); $("head").first().append("<script src='"+pmsgUrl+"' type='text/javascript'></script>"); //Listening to messages from DOM window.addEventListener("message", function(event) { console.log('CS :: message in from DOM', event); if(event.data.hasOwnProperty('cmdClient')) { var obj = JSON.parse(event.data.cmdClient); DoSomthingInContentScript(obj); } }); 

pmListener.js एक पोस्ट संदेश यूआरएल श्रोता है

 //pmListener.js //Listen to messages from Content Script and Execute Them window.addEventListener("message", function (msg) { console.log("im in REAL DOM"); if (msg.data.cmnd) { eval(msg.data.cmnd); } }); console.log("injected To Real Dom"); 

इस तरह, मुझे सीएस से रीयल डोम के बीच 2 तरीके से संवाद हो सकता है। उदाहरण के लिए यह बहुत उपयोगी है यदि आपको वेबस्केकेट इवेंट्स, या मेमोरी वेरिएबल्स या इवेंट्स में किसी भी बात की ज़रूरत है।