सामग्री स्क्रिप्ट को "पृथक विश्व" वातावरण में निष्पादित किया जाता है । आपको अपने state()तरीके को पेज में ही इंजेक्ट करना होगा ।
जब आप chrome.*स्क्रिप्ट में किसी एक एपीआई का उपयोग करना चाहते हैं , तो आपको एक विशेष ईवेंट हैंडलर लागू करना होगा, जैसा कि इस उत्तर में वर्णित है: जीमेल के मूल संदेश को पुनः प्राप्त करते हुए क्रोम एक्सटेंशन - ।
अन्यथा, यदि आपको chrome.*एपीआई का उपयोग नहीं करना है, तो मैं एक <script>टैग जोड़कर पृष्ठ में आपके सभी जेएस कोड को इंजेक्ट करने की दृढ़ता से सलाह देता हूं :
विषय - सूची
- विधि 1: किसी अन्य फ़ाइल को इंजेक्ट करें
- विधि 2: एम्बेडेड कोड इंजेक्ट करें
- विधि 2 बी: एक फ़ंक्शन का उपयोग करना
- विधि 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.runtime.getURL('script.js');
s.onload = function() {
this.remove();
};
(document.head || document.documentElement).appendChild(s);
नोट: यदि आप इस विधि का उपयोग करते हैं, तो इंजेक्ट की गई script.jsफ़ाइल को "web_accessible_resources"अनुभाग ( उदाहरण ) में जोड़ना होगा । यदि आप नहीं करते हैं, तो Chrome आपकी स्क्रिप्ट को लोड करने और कंसोल में निम्न त्रुटि प्रदर्शित करने से इनकार करेगा :
क्रोम-एक्सटेंशन का अस्वीकृत भार: // [EXTENSIONID] /script.js। एक्सटेंशन के बाहर पृष्ठों द्वारा लोड किए जाने के लिए संसाधन web_accessible_resources मेनिफ़ेस्ट में सूचीबद्ध होने चाहिए।
विधि 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');
विधि 2 बी: एक फ़ंक्शन का उपयोग करना
कोड का एक बड़ा हिस्सा के लिए, स्ट्रिंग को उद्धृत करना संभव नहीं है। एक सरणी का उपयोग करने के बजाय, एक फ़ंक्शन का उपयोग किया जा सकता है, और कड़े हो सकते हैं:
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>तत्व बनाया जाता है। यह एक <script>टैग डालने के साथ किया जा सकता है textContent(विधि 2/2 बी देखें)।
इनलाइन घटनाओं का उपयोग करने के लिए एक विकल्प, लेकिन अनुशंसित नहीं है। यह अनुशंसित नहीं है क्योंकि यदि पृष्ठ इनलाइन स्क्रिप्ट को निषिद्ध करने वाली सामग्री सुरक्षा नीति को परिभाषित करता है, तो इनलाइन इवेंट श्रोताओं को अवरुद्ध कर दिया जाता है। दूसरी ओर, इनलाइन लिपियों को विस्तार द्वारा इंजेक्ट किया जाता है, फिर भी चलता है। यदि आप अभी भी इनलाइन घटनाओं का उपयोग करना चाहते हैं, तो यह है:
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। अगर वहाँ है, तो आप अन्य वैश्विक घटनाओं में से एक को भी चुन सकते हैं। केवल जावास्क्रिप्ट कंसोल खोलें (F12), टाइप करें 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]) + ')';
player.addEventListener("onStateChange", state);