क्रोम एक्सटेंशन में jQuery का उपयोग कैसे करें?

Question

मैं एक क्रोम एक्सटेंशन लिख रहा हूं। और मैं jQueryअपने विस्तार में उपयोग करना चाहता हूं। मैं किसी भी बैकग्राउंड पेज का इस्तेमाल नहीं कर रहा हूं , सिर्फ एक बैकग्राउंड स्क्रिप्ट ।

यहाँ मेरी फाइलें हैं:

manifest.json

{
    "manifest_version": 2,

    "name": "Extension name",
    "description": "This extension does something,",
    "version": "0.1",

    "permissions": [
        "activeTab"
    ],

    "browser_action": {
        "default_icon": "images/icon_128.png"
    },

    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },

    "icons": {
        "16": "images/icon_16.png",
        "48": "images/icon_48.png",
        "128": "images/icon_128.png"
    }
}

मेरी background.jsफ़ाइल नाम की एक और फ़ाइल चलाता हैwork.js

// Respond to the click on extension Icon
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'work.js'
    });
});

मेरे विस्तार का मुख्य तर्क अंदर है work.js। जिन सामग्रियों की मुझे नहीं लगती, वे इस सवाल के लिए यहाँ मायने रखती हैं।

मैं पूछना चाहता हूं कि मैं अपने विस्तार में jQuery का उपयोग कैसे कर सकता हूं। चूंकि मैं किसी भी पृष्ठभूमि पृष्ठ का उपयोग नहीं कर रहा हूं। मैं इसमें सिर्फ jQuery नहीं जोड़ सकता। तो मैं अपने एक्सटेंशन में jQuery कैसे जोड़ और उपयोग कर सकता हूं?

मैंने background.jsफ़ाइल से अपने काम के साथ jQuery चलाने की कोशिश की ।

// Respond to the click on extension Icon
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'thirdParty/jquery-2.0.3.js'
    });
    chrome.tabs.executeScript({
        file: 'work.js'
    });
});

और यह ठीक काम करता है, लेकिन मुझे इस बात की चिंता है कि क्या इस तरह से निष्पादित की जाने वाली लिपियों को अतुल्यकालिक रूप से निष्पादित किया जा रहा है। यदि हाँ तो यह हो सकता है कि काम.जहाँ भी चलता है (या अन्य पुस्तकालय जो मैं भविष्य में जोड़ सकता हूं) से पहले हो जाए।

और मैं यह भी जानना चाहूंगा कि मेरे क्रोम एक्सटेंशन में तीसरे पक्ष के पुस्तकालयों का उपयोग करने का सही और सबसे अच्छा तरीका क्या है।

Comments

वनीला जाने का सही तरीका है!

— bjb568

यदि आप यहां देख रहे हैं कि पॉप-अप एक्सटेंशन में jQuery कैसे जोड़ा जाए (जैसा कि मैं था), तो यह प्रश्न देखें: stackoverflow.com/questions/12035242/…

— Pro Q

Answer 1

आपको अपनी jquery स्क्रिप्ट को अपने क्रोम-एक्सटेंशन प्रोजेक्ट और backgroundअपने मैनिफ़ेस्ट के अनुभाग में जोड़ना होगा। इस तरह से करें:

  "background":
    {
        "scripts": ["thirdParty/jquery-2.0.3.js", "background.js"]
    }

यदि आपको content_scripts में jquery की आवश्यकता है, तो आपको इसे प्रकट में भी जोड़ना होगा:

"content_scripts": 
    [
        {
            "matches":["http://website*"],
            "js":["thirdParty/jquery.1.10.2.min.js", "script.js"],
            "css": ["css/style.css"],
            "run_at": "document_end"
        }
    ]

यह जो मैंने किया है।

इसके अलावा, अगर मैं सही ढंग से याद करता हूं, तो पृष्ठभूमि स्क्रिप्ट को एक पृष्ठभूमि विंडो में निष्पादित किया जाता है जिसे आप खोल सकते हैं chrome://extensions।

Comments

वैसे आप वास्तव में क्या मतलब है You have to add your jquery script to your chrome-extension project? मैंने ऐसा किया: मैनिफ़ेस्ट.जॉसन: "background": { `" स्क्रिप्ट्स ": [" थर्डपार्टी / jquery-2.0.3.js "," बैकग्राउंड.जेएस "],` `" लगातार ": असत्य` `},` और मैंने इसे डाउनलोड किया jQuery के थर्डपार्टी फोल्डर में। हालाँकि मैं अभी भी jQuery का उपयोग नहीं कर सकता। यह त्रुटि देता है: Uncaught ReferenceError: $ is not defined मैंने इसे work.jsपरीक्षण के लिए अपनी फ़ाइल में जोड़ा है । $("body").html("Foo!");

— ईशान

उपरोक्त टिप्पणी एक गड़बड़ी की तरह दिखती है लेकिन टिप्पणियों को जोड़ने के दौरान पूर्वावलोकन नहीं दिखाया गया है। कृपया मुझे इसके लिए क्षमा करें।

— ईशान

मेरा मतलब है कि इसे अपने क्रोम-एक्सटेंशन फ़ोल्डर में जोड़ें। जैसे /home/you/chromexetension_source_files/thirdParty/jquery-2.0.3.js। आप अपने काम के साथ एक ही काम करना चाहिए।

— निको

आपने जो कहा, मैंने करने की कोशिश की। लेकिन मुझे अभी भी वही त्रुटि हो रही है जो मैं अपनी work.jsफ़ाइल से jquery तक नहीं पहुँच पा रहा हूँ । Uncaught ReferenceError: $ is not defined। यदि आप कर सकते हैं, तो आप कहीं काम करने का उदाहरण अपलोड कर सकते हैं। "$" ("शरीर") करने जैसा एक सरल उदाहरण। html ("फू!"); ' काम में।

— इशान

मुझे पहचानने jQueryया $पहचानने में भी परेशानी हुई । यह पता चला कि मैं घोषणापत्र में jQuery अंतिम का उल्लेख कर रहा था। जब मैंने इसे पहली बार रखा तो इसे पहचाना गया।

— BenR

Answer 2

इसके बहुत आसान बस निम्नलिखित करें:

अपने मेनिफ़ेस्ट में निम्नलिखित पंक्ति जोड़ें। Json

"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",

अब आप url से सीधे jQuery को लोड करने के लिए स्वतंत्र हैं

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

स्रोत: गूगल डॉक

Comments

यदि आपके पास लोड करने के लिए कई स्क्रिप्ट हैं तो क्या होगा?

— एक और

यदि आप अपनी स्क्रिप्ट को किसी दूरस्थ सर्वर से लोड करना चाहते हैं, तो इसका शानदार उत्तर है (जिसके लिए प्रभावी रूप से आवश्यक है कि आप अपने विस्तार के साथ दूरस्थ सर्वर पर भरोसा करें और इसके पास जो कुछ भी है)।

— नाथनियल वेरहारेन

@NathanielVerhaaren यह बढ़ाने के लिए एक उचित बिंदु है, लेकिन इसे स्रोत subresource integrity(SRI) का उपयोग करके सत्यापित किया जा सकता है ।

— दान एटकिन्सन

Answer 3

और यह ठीक काम करता है, लेकिन मुझे इस बात की चिंता है कि क्या इस तरह से निष्पादित की जाने वाली लिपियों को अतुल्यकालिक रूप से निष्पादित किया जा रहा है। यदि हाँ, तो ऐसा हो सकता है कि j.js (या अन्य पुस्तकालय जो मैं भविष्य में जोड़ सकता हूं) से पहले भी काम करता है।

यह वास्तव में एक चिंता का विषय नहीं होना चाहिए: आप स्क्रिप्ट को एक निश्चित जेएस संदर्भ में निष्पादित करने के लिए कतारबद्ध करते हैं, और यह संदर्भ एक दौड़ की स्थिति नहीं हो सकता है क्योंकि यह एकल-थ्रेडेड है।

हालाँकि, इस चिंता को खत्म करने का उचित तरीका कॉल को चेन करना है:

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'thirdParty/jquery-2.0.3.js'
    }, function() {
        // Guaranteed to execute only after the previous script returns
        chrome.tabs.executeScript({
            file: 'work.js'
        });
    });
});

या, सामान्यीकृत:

function injectScripts(scripts, callback) {
  if(scripts.length) {
    var script = scripts.shift();
    chrome.tabs.executeScript({file: script}, function() {
      if(chrome.runtime.lastError && typeof callback === "function") {
        callback(false); // Injection failed
      }
      injectScripts(scripts, callback);
    });
  } else {
    if(typeof callback === "function") {
      callback(true);
    }
  }
}

injectScripts(["thirdParty/jquery-2.0.3.js", "work.js"], doSomethingElse);

या, उचित (और उचित हस्ताक्षर के अनुरूप अधिक लाया गया):

function injectScript(tabId, injectDetails) {
  return new Promise((resolve, reject) => {
    chrome.tabs.executeScript(tabId, injectDetails, (data) => {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError.message);
      } else {
        resolve(data);
      }
    });
  });
}

injectScript(null, {file: "thirdParty/jquery-2.0.3.js"}).then(
  () => injectScript(null, {file: "work.js"})
).then(
  () => doSomethingElse
).catch(
  (error) => console.error(error)
);

या, बिल्ली क्यों नहीं, async/ await-के लिए भी स्पष्ट वाक्यविन्यास:

function injectScript(tabId, injectDetails) {
  return new Promise((resolve, reject) => {
    chrome.tabs.executeScript(tabId, injectDetails, (data) => {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError.message);
      } else {
        resolve(data);
      }
    });
  });
}

try {
  await injectScript(null, {file: "thirdParty/jquery-2.0.3.js"});
  await injectScript(null, {file: "work.js"});
  doSomethingElse();
} catch (err) {
  console.error(err);
}

ध्यान दें, फ़ायरफ़ॉक्स में आप बस उपयोग कर सकते हैं browser.tabs.executeScriptक्योंकि यह एक वादा वापस करेगा।

Comments

पहला तरीका शानदार है। जैसा कि कोई व्यक्ति जो अधिक जावास्क्रिप्ट को नहीं जानता है, मैंने कभी ऐसा कुछ नहीं माना।

— फ्रिस्कीसगा

Answer 4

पहले से बताए गए समाधानों के अलावा, आप jquery.min.jsस्थानीय रूप से भी डाउनलोड कर सकते हैं और फिर उसका उपयोग कर सकते हैं -

डाउनलोड करने के लिए -

wget "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"

प्रकट.जॉन -

"content_scripts": [
   {
    "js": ["/path/to/jquery.min.js", ...]
   }
],

html में -

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

संदर्भ - https://developer.chrome.com/extensions/contentSecurityPolicy

Comments

यह सबसे अच्छा तरीका है ... आपको html भाग की आवश्यकता नहीं है।

— c-एक

Answer 5

मेरे मामले में क्रॉस-डॉक्यूमेंट मैसेजिंग (XDM) और एक्ज़क्यूटिंग क्रोम एक्सटेंशन के माध्यम से पेज लोड होने के बजाय ऑनक्लिक के माध्यम से काम करने का समाधान मिला।

manifest.json

{
  "name": "JQuery Light",
  "version": "1",
  "manifest_version": 2,

  "browser_action": {
    "default_icon": "icon.png"
  },

  "content_scripts": [
    {
      "matches": [
        "https://*.google.com/*"
      ],
      "js": [
        "jquery-3.3.1.min.js",
        "myscript.js"
      ]
    }
  ],

  "background": {
    "scripts": [
      "background.js"
    ]
  }

}

background.js

chrome.browserAction.onClicked.addListener(function (tab) {
  chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
  });
});

myscript.js

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        if (request.message === "clicked_browser_action") {
        console.log('Hello world!')
        }
    }
);