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

मैं एक Firefox विस्तार के अंदर jQuery का उपयोग करना चाहते, मैं इस तरह xul फ़ाइल में पुस्तकालय आयातित:फ़ायरफ़ॉक्स एक्सटेंशन में jQuery का उपयोग कैसे करें

<script type="application/x-javascript" src="chrome://myExtension/content/jquery.js"> </script>

लेकिन $() फ़ंक्शन में मान्यता प्राप्त नहीं है xul फ़ाइल न तो jQuery()।

मैं इस समस्या के बारे में googled और कुछ समाधान पाया लेकिन कोई भी मेरे साथ काम किया: http://gluei.com/blog/view/using-jquery-inside-your-firefox-extension http://forums.mozillazine.org/viewtopic.php?f=19&t=989465

मैं भी 'content.document' वस्तु (जो 'दस्तावेज़' refrences पारित करने के लिए कोशिश की है इस तरह jQuery कार्य करने के लिए संदर्भ पैरामीटर के रूप में वस्तु):

$('img',content.document);

लेकिन अभी भी काम नहीं कर रहा, किसी भी एक से पहले इस समस्या भर में आया है?

स्रोत

2009-01-29 Anonymous

क्रमांक इस पर एक इनाम की पेशकश, दिलचस्प – DFectuoso

विस्तार से अन्य विस्तार और टूलबार बटन आदि, यहाँ की तरह अन्य XUL घटकों के साथ कोई संघर्षों के साथ सुरक्षित रूप से Firefox विस्तार के अंदर jQuery का उपयोग कर के बारे में पढ़ें/ए-गाइड-टू-यूज-जेक्वायरी-इन-फ़ायरफ़ॉक्स-एक्सटेंशन/ –

मैं का उपयोग निम्नलिखित example.xul: मेरी कंपनी की प्रयोगशालाओं कुछ है कि इस जावास्क्रिप्ट का उपयोग करते हुए सीधे यहाँ करता है

<?xml version="1.0"?> 
<overlay id="example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
<head></head> 
<script type="application/x-javascript" src="jquery.js"></script> 
<script type="application/x-javascript" src="example.js"></script> 
</overlay>

और यहाँ एक example.js

(function() { 
    jQuery.noConflict(); 
    $ = function(selector,context) { 
     return new jQuery.fn.init(selector,context||example.doc); 
    }; 
    $.fn = $.prototype = jQuery.fn; 

    example = new function(){}; 
    example.log = function() { 
     Firebug.Console.logFormatted(arguments,null,"log"); 
    }; 
    example.run = function(doc,aEvent) { 
     // Check for website 
     if (!doc.location.href.match(/^http:\/\/(.*\.)?stackoverflow\.com(\/.*)?$/i)) 
      return; 

     // Check if already loaded 
     if (doc.getElementById("plugin-example")) return; 

     // Setup 
     this.win = aEvent.target.defaultView.wrappedJSObject; 
     this.doc = doc; 

     // Hello World 
     this.main = main = $('<div id="plugin-example">').appendTo(doc.body).html('Example Loaded!'); 
     main.css({ 
      background:'#FFF',color:'#000',position:'absolute',top:0,left:0,padding:8 
     }); 
     main.html(main.html() + ' - jQuery <b>' + $.fn.jquery + '</b>'); 
    }; 

    // Bind Plugin 
    var delay = function(aEvent) { 
     var doc = aEvent.originalTarget; setTimeout(function() { 
      example.run(doc,aEvent); 
     }, 1); 
    }; 
    var load = function() { 
     gBrowser.addEventListener("DOMContentLoaded", delay, true); 
    }; 
    window.addEventListener("pageshow", load, false); 

})();

स्रोत

2009-01-30 19:53:29 sunsean

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

मैंने एक और पूरा उदाहरण जोड़ा है। जांचें और देखें कि क्या यह आपके लिए काम करता है। – sunsean

यह विधि बिल्कुल अनुचित है जब आप अतिप्रवाह से jquery लोड करते हैं तो 2 ऑब्जेक्ट्स jQuery और $ को संपूर्ण विंडो के लिए परिभाषित किया जाता है और अन्य एक्सटेंशन के साथ संघर्ष हो सकता है। यद्यपि आप इसे छिपाने के लिए jquery.noconflict और फ़ंक्शन स्कोप का उपयोग कर सकते हैं लेकिन ओवरले को असीमित रूप से लोड किया जा सकता है। अभी भी एक संभावना है कि एक अन्य फ़ायरफ़ॉक्स के एक्सटेंशन पहले से ही परिभाषित किए गए हैं और jQuery पर उपयोग किए जाने से पहले $ jquery.noconflict –

यह बुरा अभ्यास हो सकता है, लेकिन क्या आपने इसे इनलाइन समेत माना है?

स्रोत

2009-01-29 17:04:05

मैंने यह कोशिश नहीं की लेकिन मुझे नहीं लगता कि यह स्क्रिप्ट टैग में इसे शामिल करने से अलग है। मैं वैसे भी कोशिश करूंगा –

यदि आप ऐसा करते हैं तो वे आपके एक्सटेंशन को स्वीकार नहीं करेंगे। आपको मूल अनमोडिफाइड लाइब्रेरी फाइलों को शामिल करना होगा, और मोज़िला अभ्यर्थी यह सत्यापित करेंगे कि एमडी 5/एसएचए चेकसम मैच हैं। –

मुझे लगता है कि यह एरिक कह रहा था, लेकिन आप सीधे यूआरएल से जावास्क्रिप्ट लोड कर सकते हैं।

javascript:var%20s=document.createElement('script');s.setAttribute('src','http://YOURJAVASCRIPTFILE.js');document.getElementsByTagName('body')[0].appendChild(s);void(s);

मुझे लगता है कि आप चाहते हैं कि आपका एक्सटेंशन JQuery लोड करना चाहता है ताकि आप पेज तत्वों को आसानी से कुशल बना सकें? http://parkerfox.co.uk/labs/pixelperfect

स्रोत

2009-01-30 10:15:11

मुझे पता है कि पृष्ठ के DOM पर लाइब्रेरी को इंजेक्ट कैसे करें, लेकिन समस्या यह है कि जब भी कोई पृष्ठ लोड होता है तो मैं अपने एक्सटेंशन के सभी कार्यों को इंजेक्ट नहीं कर सकता। यही कारण है कि मैं सभी फ़ंक्शन एक्सटेंशन फ़ोल्डर –

वहाँ में एक उत्कृष्ट लेख है मोज़िलाज़िन फ़ोरम जो इस चरण-दर-चरण का वर्णन करता है: http://forums.mozillazine.org/viewtopic.php?f=19&t=2105087

I hav अभी तक यह कोशिश नहीं की है, हालांकि मैं यहां जानकारी को डुप्लिकेट करने में संकोच करता हूं।

स्रोत

2011-03-08 05:51:14 Skrud

निम्नलिखित समाधान यह संभव हो contentScriptFile में jQuery का उपयोग करने के लिए बनाता है (लक्ष्यीकरण 1.5 युद्ध-sdk)

अपने main.js में:

exports.main = function() { 
    var pageMod = require("page-mod"); 

    pageMod.PageMod({ 
      include: "*", 
      contentScriptWhen: 'end', 
      contentScriptFile: [data.url("jquery-1.7.1-min.js") , data.url("notifier.js") , data.url("message.js")], 
      onAttach: function onAttach(worker) { 
      //show the message 
      worker.postMessage("Hello World"); 
      } 
    }); 

};

अपने message.js में:

self.on("message", function(message){ 
    if(message !== "undefined"){ 
     Notifier.info(message); 
    } 
});

कुछ नुकसान जो आपको देखने के लिए बाहर की आवश्यकता है:

contentScriptFile सरणी का क्रम। अगर message.js पहले रखा जाएगा: jQuery का पुन: उपयोग नहीं किया जाएगा।
data.url में http: // url न रखें (यह काम नहीं करता है)!
आपकी सभी जावास्क्रिप्ट फ़ाइलें डेटा फ़ोल्डर में होनी चाहिए। (केवल मुख्य।js
```
$('img',content.document); 
```
की

स्रोत

2012-03-08 20:56:42 David

इसके बजाय lib फ़ोल्डर में होना चाहिए) आप

$('img',window.content.document);

मेरे मामले यह काम करता है में की कोशिश कर सकते हैं।

स्रोत

2013-07-14 08:46:32

यह मेरे लिए भी काम करता है। इस समाधान के साथ कुछ भी गलत है? – Rooster242

@sunsean does not work as expected when it comes to handling multiple loads द्वारा वर्तमान शीर्ष-उत्तर को चालू करता है। फ़ंक्शन को दस्तावेज़ पर ठीक से बंद करना चाहिए और वैश्विक स्थिति से बचना चाहिए।

इसके अलावा, आपको अन्य एड-ऑन के साथ संघर्ष से बचने के लिए jQuery.noConflict(true) पर कॉल करना होगा!

यह वह है जिसे मैं इसे लिखूंगा (फिर से, मैं प्लेग की तरह jquery (ऐड-ऑन में) से बचूंगा ...)। पहले ओवरले XUL

<?xml version="1.0"?> 
<overlay id="test-addon-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
    <script type="text/javascript" src="jquery.js"/> 
    <script type="text/javascript" src="overlay.js"/> 
</overlay>

और फिर ओवरले स्क्रिप्ट:

// Use strict mode in particular to avoid implicitly var declarations 
(function() { 
    "use strict"; 

    // Main runner function for each content window. 
    // Similar to SDK page-mod, but without the security boundaries. 
    function run(window, document) { 
    // jquery setup. per https://stackoverflow.com/a/496970/484441 
    $ = function(selector,context) { 
     return new jq.fn.init(selector,context || document); 
    }; 
    $.fn = $.prototype = jq.fn; 

    if (document.getElementById("my-example-addon-container")) { 
     return; 
    } 
    let main = $('<div id="my-example-addon-container">'); 
    main.appendTo(document.body).text('Example Loaded!'); 
    main.click(function() { //<--- added this function 
     main.text(document.location.href); 
    }); 
    main.css({ 
     background:'#FFF',color:'#000',position:'absolute',top:0,left:0,padding:8 
    }); 
    }; 

    const log = Components.utils.reportError.bind(Components.utils); 

    // Do not conflict with other add-ons using jquery. 
    const jq = jQuery.noConflict(true); 

    gBrowser.addEventListener("DOMContentLoaded", function load(evt) { 
    try { 
     // Call run with this == window ;) 
     let doc = evt.target.ownerDocument || evt.target; 
     if (!doc.location.href.startsWith("http")) { 
     // Do not even attempt to interact with non-http(s)? sites. 
     return; 
     } 
     run.call(doc.defaultView, doc.defaultView, doc); 
    } 
    catch (ex) { 
     log(ex); 
    } 
    }, true); 
})();

यहाँ a complete add-on as a gist है। बस jquery की एक प्रति में ड्रॉप करें और यह जाने के लिए अच्छा होना चाहिए। http://meherranjan.com/blog:

स्रोत

2014-05-21 07:34:01 nmaier

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

उत्तर

संबंधित मुद्दे