javascript - क्रोम एक्सटेंशन में<स्क्रिप्ट> टैग के भीतर सरल jQuery निष्पादित नहीं है




html google-chrome-extension (2)

अपने script टैग को शरीर के नीचे ले जाने का प्रयास करें, जब सभी तत्व लोड होते हैं।

यह मेरा HTML है:

<!doctype html>
<html>
<head>
    <title>PassVault</title>
    <link rel="stylesheet" type="text/css" href="stil.css">
    <meta charset="utf-8">
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("div").css("border", "3px solid red");

        });
    </script>
</head>

<body>
    <div id="rainbow"> </div>
    <div id="loginBox">
        <div id="welcome"> Dobrodošli, uporabnik! </div><br>
    </div>
</body>
</html>

दस्तावेज़ लोड होने के बाद, यह मेरे सभी divs (एचटीएमएल फ़ाइल में बहुत कुछ है) के चारों ओर एक लाल सीमा रखती है, लेकिन यह नहीं है। मुझे नहीं पता कि यहां क्या गलत है। JQuery एक ही फाइल में है और जहां गूगल की मेजबानी की गई है वह लिंक गूगल द्वारा प्रदान किया गया है और यह भी काम करता है।

यह उल्लेखनीय है कि .html फ़ाइल को ब्राउज़र क्रोम द्वारा Google Chrome एक्सटेंशन की manifest.json फ़ाइल से कहा जाता है। इसलिए, यह इस प्रकार पॉपअप को खोलता है:

यह भी उल्लेखनीय है कि उपरोक्त छवि Google द्वारा प्रदान की गई एक उदाहरण छवि है यह मेरी छवि नहीं है मेरे div की कोई सीमा नहीं है और jQuery उस बदलाव को नहीं बदलता है।

manifest.json

.... 

"browser_action": {
    "default_popup": "popupindex.html",
}
....

मुझे नहीं पता कि यह विंडो पॉपअप होने पर .js फ़ाइल कार्यक्षमता को प्रभावित करती है, लेकिन मुझे यकीन है कि इसके साथ ऐसा करने के लिए कुछ है

ओपी द्वारा एक उत्तर पर टिप्पणी से जोड़ा गया:
इन सभी divs के चारों ओर एक सीमा जोड़ना सिर्फ परीक्षण का मेरा तरीका था कि jQuery के काम करता है या नहीं। मुझे भविष्य में अन्य चीजों के लिए jQuery की आवश्यकता होगी। यह इस साधारण चीज़ के साथ भी काम नहीं करता है


आप सामग्री सुरक्षा नीति का उल्लंघन करने वाले स्क्रिप्ट को लोड / चलाने का प्रयास कर रहे हैं । इससे आपके एक्सटेंशन के बाहरी स्रोत से jQuery को लोड करने के अपने प्रयास दोनों प्रभावित होते हैं और इनलाइन स्क्रिप्ट (आपके $(document).read() कोड)।

पॉपअप में राइट-क्लिक करके और "निरीक्षण करें" का चयन करके आप पॉपअप के लिए कंसोल तक पहुंच सकते हैं। कंसोल आपको निम्न त्रुटियां दिखाएगी:

Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".

तथा

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-qMVaiPhbudnaz91QqECVnbdTvKWnqeultnb/Nt/ybo8='), or a nonce ('nonce-...') is required to enable inline execution.

एक्सटेंशन डिफ़ॉल्ट सामग्री सुरक्षा नीति

क्रोम एक्सटेंशन के लिए, डिफ़ॉल्ट सामग्री सुरक्षा नीति है:

script-src 'self'; object-src 'self'

Google बताता है कि इसके लिए कारण हैं:

यह नीति एक्सटेंशन और एप्लिकेशन को तीन तरह से सीमित करके सुरक्षा जोड़ती है:

JQuery लोड हो रहा है

JQuery लोड करने के लिए, सबसे अच्छा समाधान है jQuery कोड डाउनलोड करने के लिए। प्रश्न से, आप जिस कोड का उपयोग कर रहे हैं वह यहां है: http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js हालांकि, टेड द्वारा वर्णित है, यह jQuery का एक पुराना संस्करण है। जब तक आपके पास पुराने संस्करण का उपयोग करने का कोई कारण नहीं है, तो आप https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js प्रयास कर सकते हैं। आप उस फाइल को अपनी विस्तार निर्देशिका (या उप-डायरेक्टरी में) में संग्रहीत कर सकते हैं और इसे अपने पॉपअप इंडेक्स.html में शामिल कर सकते हैं।

<script src="jquery.min.js"></script>

आपका अपना कोड

आपका जावास्क्रिप्ट कोड नहीं चल रहा है क्योंकि एक्सटेंशन के लिए डिफ़ॉल्ट सामग्री सुरक्षा नीति इनलाइन स्क्रिप्ट की अनुमति नहीं देती है। सबसे अच्छा समाधान अपने $(document).ready() कोड को एक अलग फ़ाइल में ले जाना है (उदाहरण के लिए, पॉपअप इंडेक्स.जेएस ) जो तब आपके पॉपअपइंडएक्स। Html में शामिल है:

<script src="popupindex.js"></script>

जाहिर है, कि jQuery के लोड हो रहा है <script> टैग के बाद होना चाहिए।

आप इनलाइन स्क्रिप्ट्स को शामिल कर सकते हैं, लेकिन आपको अपने manifest.json के भीतर content_security_policy कुंजी के मूल्य में "स्क्रिप्ट के हैश की" स्क्रिप्ट- src "directive " प्रदान करने की आवश्यकता होगी। हालांकि, ऐसा करने के लिए समय और प्रयास के लायक नहीं है। कोड को अलग फ़ाइल में स्थानांतरित करना बहुत आसान है

HTML परिभाषित ईवेंट हैंडलर्स में शामिल जावास्क्रिप्ट की अनुमति नहीं है

इवेंट हैंडलर के लिए HTML में जो कोड जोड़ता है वह जावास्क्रिप्ट है और इसकी अनुमति भी नहीं है। उदाहरण के लिए, निम्नलिखित विफल होंगे:

<button onclick="doMyThing();">My button</button>

आपको उस कोड की आवश्यकता है:

<button id="doMyThingButton">My button</button>

फिर, आपकी अलग जावास्क्रिप्ट फ़ाइल में (ऊपर देखें), कुछ ऐसा:

document.getElementById('doMyThingButton').addEventListener('click',doMyThing,false);

पॉपअप चलने वाले jQuery के साथ पूर्ण एक्सटेंशन

निम्न पूर्ण विस्तार, जो आपके jQuery कोड को चलाता है, एक पॉपअप का उत्पादन करता है जो ऐसा दिखता है:

manifest.json :

{
    "description": "Demonstrate use of jQuery in a popup.",
    "manifest_version": 2,
    "name": "jQuery-in-popup",
    "version": "0.1",

    "browser_action": {
        "default_icon": {
            "48": "myIcon.png"
        },
        "default_title": "Show panel",
        "default_popup": "popupindex.html"
    }
}

popupindex.html :

<!doctype html>
<html>
<head>
    <title>PassVault</title>
    <meta charset="utf-8">
    <script type='text/javascript' src='jquery.min.js'></script>
    <script type="text/javascript" src='popupindex.js'> </script>
</head>
<body>
    <div id="rainbow"> </div>
    <div id="loginBox">
        <div id="welcome"> Dobrodošli, uporabnik! </div><br>
    </div>
</body>
</html>

popupindex.js :

$(document).ready(function () {
    $("div").css("border", "3px solid red");
});

jquery.min.js :

Https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js से डाउनलोड किया गया है और विस्तार की निर्देशिका में jquery.min.js के रूप में संग्रहीत है।







content-security-policy