كيف يمكنني استخدام JQuery في البرامج النصية Greasemonkey في Google Chrome؟

Question

كما قد يعرف بعضكم، وضعت Google Chrome بعض القيود الشديدة على البرامج النصية Greasemonkey.

الكروم لا يدعم @require, @resource, unsafeWindow, GM_registerMenuCommand, GM_setValue, ، أو GM_getValue.

بدون طلب، لا يمكنني العثور على طريقة لتضمين مكتبة مسج في البرنامج النصي Greasemonkey تحت Google Chrome.

هل لدى أي شخص بعض النصائح في هذا الشأن؟

Answer 1

من عند "نصيحة البرنامج النصي للمستخدم: باستخدام مدونة JQuery - Erik Vold's بلوق"

// ==UserScript==
// @name         jQuery For Chrome (A Cross Browser Example)
// @namespace    jQueryForChromeExample
// @include      *
// @author       Erik Vergobbi Vold & Tyler G. Hicks-Wright
// @description  This userscript is meant to be an example on how to use jQuery in a userscript on Google Chrome.
// ==/UserScript==

// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    script.textContent = "window.jQ=jQuery.noConflict(true);(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
  // Note, jQ replaces $ to avoid conflicts.
  alert("There are " + jQ('a').length + " links on this page.");
}

// load jQuery and execute the main function
addJQuery(main);

Answer 2

لقد كتبت بعض الوظائف بناء على إريك فولد سيناريو للمساعدة في تشغيل وظائف تشغيل ورمز وغيرها من البرامج النصية الأخرى في مستند. يمكنك استخدامها لتحميل jQuery في الصفحة ثم قم بتشغيل التعليمات البرمجية تحت Global window الكائن.

مثال على الاستخدام

// ==UserScript==
// @name           Example from http://stackoverflow.com/q/6834930
// @version        1.3
// @namespace      http://stackoverflow.com/q/6834930
// @description    An example, adding a border to a post on Stack Overflow.
// @include        http://stackoverflow.com/questions/2246901/*
// ==/UserScript==

var load,execute,loadAndExecute;load=function(a,b,c){var d;d=document.createElement("script"),d.setAttribute("src",a),b!=null&&d.addEventListener("load",b),c!=null&&d.addEventListener("error",c),document.body.appendChild(d);return d},execute=function(a){var b,c;typeof a=="function"?b="("+a+")();":b=a,c=document.createElement("script"),c.textContent=b,document.body.appendChild(c);return c},loadAndExecute=function(a,b){return load(a,function(){return execute(b)})};

loadAndExecute("//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", function() {
    $("#answer-6834930").css("border", ".5em solid black");
});

تستطيع انقر هنا لتثبيته، إذا كنت تثق في أنني لا أحاول خداعك في تثبيت شيء ضار وأن لا أحد قام بتحرير مشاركتي للإشارة إلى شيء آخر. إعادة تحميل الصفحة ويجب أن ترى حدود حول مشاركتي.

المهام

load(url, onLoad, onError)

تحميل البرنامج النصي في url في المستند. اختياريا، قد يتم توفير عمليات الاسترجاعات ل onLoad و onError.

execute(functionOrCode)

إدراج وظيفة أو سلسلة من التعليمات البرمجية في المستند وتنفذها. يتم تحويل الوظائف إلى التعليمات البرمجية المصدر قبل إدراجها، لذلك يفقدون نطاق / إغلاقها الحاليين ويتم تشغيلها تحت العالميين window الكائن.

loadAndExecute(url, functionOrCode)

اختصار؛ هذا يغطي النص url, ، ثم إدراج وينفذ functionOrCode إذا نجحت.

شفرة

function load(url, onLoad, onError) {
    e = document.createElement("script");
    e.setAttribute("src", url);

    if (onLoad != null) { e.addEventListener("load", onLoad); }
    if (onError != null) { e.addEventListener("error", onError); }

    document.body.appendChild(e);

    return e;
}

function execute(functionOrCode) {
    if (typeof functionOrCode === "function") {
        code = "(" + functionOrCode + ")();";
    } else {
        code = functionOrCode;
    }

    e = document.createElement("script");
    e.textContent = code;

    document.body.appendChild(e);

    return e;
}

function loadAndExecute(url, functionOrCode) {
    load(url, function() { execute(functionOrCode); });
}

Answer 3

استخدام jQuery. دون خوف من النزاعات, ، بالاتصال jQuery.noConflict(true). وبعد مثل ذلك:

function GM_main ($) {
    alert ('jQuery is installed with no conflicts! The version is: ' + $.fn.jquery);
}

add_jQuery (GM_main, "1.7.2");

function add_jQuery (callbackFn, jqVersion) {
    jqVersion       = jqVersion || "1.7.2";
    var D           = document;
    var targ        = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    var scriptNode  = D.createElement ('script');
    scriptNode.src  = 'http://ajax.googleapis.com/ajax/libs/jquery/'
                    + jqVersion
                    + '/jquery.min.js'
                    ;
    scriptNode.addEventListener ("load", function () {
        var scriptNode          = D.createElement ("script");
        scriptNode.textContent  =
            'var gm_jQuery  = jQuery.noConflict (true);\n'
            + '(' + callbackFn.toString () + ')(gm_jQuery);'
        ;
        targ.appendChild (scriptNode);
    }, false);
    targ.appendChild (scriptNode);
}

---

---

لكن، بالنسبة إلى البرامج النصية عبر المتصفح، لماذا لا تستفيد من نسخة لطيفة وسريعة أو محلية من المسق، عندما تستطيع؟

ما يلي يعمل كمسؤولين كروم وبرنامج نصي Greasemonkey، ويستخدم المحلي اللطيف @require نسخة من jQuery، إذا كانت النظام الأساسي تدعمه.

// ==UserScript==
// @name     _Smart, cross-browser jquery-using script
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_info
// ==/UserScript==

function GM_main ($) {
    alert ('jQuery is installed with no conflicts! The version is: ' + $.fn.jquery);
}

if (typeof jQuery === "function") {
    console.log ("Running with local copy of jQuery!");
    GM_main (jQuery);
}
else {
    console.log ("fetching jQuery from some 3rd-party server.");
    add_jQuery (GM_main, "1.7.2");
}

function add_jQuery (callbackFn, jqVersion) {
    var jqVersion   = jqVersion || "1.7.2";
    var D           = document;
    var targ        = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    var scriptNode  = D.createElement ('script');
    scriptNode.src  = 'http://ajax.googleapis.com/ajax/libs/jquery/'
                    + jqVersion
                    + '/jquery.min.js'
                    ;
    scriptNode.addEventListener ("load", function () {
        var scriptNode          = D.createElement ("script");
        scriptNode.textContent  =
            'var gm_jQuery  = jQuery.noConflict (true);\n'
            + '(' + callbackFn.toString () + ')(gm_jQuery);'
        ;
        targ.appendChild (scriptNode);
    }, false);
    targ.appendChild (scriptNode);
}

Answer 4

إذا كانت الصفحة لديها بالفعل jQuery، فما عليك سوى اتبع هذا القالب:

// ==UserScript==
// @name          My Script
// @namespace     my-script
// @description   Blah
// @version       1.0
// @include       http://site.com/*
// @author        Me
// ==/UserScript==

var main = function () {

    // use $ or jQuery here, however the page is using it

};

// Inject our main script
var script = document.createElement('script');
script.type = "text/javascript";
script.textContent = '(' + main.toString() + ')();';
document.body.appendChild(script);

Answer 5

الطريقة البسيطة تستخدم required الكلمة الرئيسية:

// @require     http://code.jquery.com/jquery-latest.js

Answer 6

هناك طريقة سهلة حقا للتجول في إدراج نسخة كاملة من مسج لبرامج نصوص Chrome عندما لا تستخدم هذه البرامج النصية في الواقع أي ميزات مميزة (GM_ * وظائف، إلخ) ...

ما عليك سوى إدراج البرنامج النصي نفسه في صفحة Dom وتنفيذ! أفضل جزء هو أن هذه التقنية تعمل أيضا أيضا على Firefox + Greasemonkey، حتى تتمكن من استخدام نفس البرنامج النصي لكليهما:

var script = document.createElement("script");
script.type = "text/javascript";
script.textContent = "(" + threadComments.toString() + ")(jQuery)";
document.body.appendChild(script);

function threadComments($) {
    // taken from kip's http://userscripts-mirror.org/scripts/review/62163
    var goodletters = Array('\u00c0','\u00c1','\u00c2','\u00c3','\u00c4','\u00c5','\u00c6','\u00c7'
                             ,'\u00c8','\u00c9','\u00ca','\u00cb','\u00cc','\u00cd','\u00ce','\u00cf'
                                      ,'\u00d1','\u00d2','\u00d3','\u00d4','\u00d5','\u00d6'         
                             ,'\u00d8','\u00d9','\u00da','\u00db','\u00dc','\u00dd'                  
                             ,'\u00e0','\u00e1','\u00e2','\u00e3','\u00e4','\u00e5','\u00e6','\u00e7'
                             ,'\u00e8','\u00e9','\u00ea','\u00eb','\u00ec','\u00ed','\u00ee','\u00ef'
                                      ,'\u00f1','\u00f2','\u00f3','\u00f4','\u00f5','\u00f6'         
                             ,'\u00f8','\u00f9','\u00fa','\u00fb','\u00fc','\u00fd'         ,'\u00ff').join('');

    // from Benjamin Dumke's http://userscripts-mirror.org/scripts/review/68252
    function goodify(s)
      {
         good = new RegExp("^[" + goodletters + "\\w]{3}");
         bad = new RegExp("[^" + goodletters + "\\w]");
         original = s;
         while (s.length >3 && !s.match(good)) {
            s = s.replace(bad, "");
            }
         if (!s.match(good))
         {
           // failed, so we might as well use the original
           s = original;
         }
         return s;
      }  

    in_reply_to = {};


    function who(c, other_way) {


        if (other_way)
        {
            // this is closer to the real @-reply heuristics
            m = /@(\S+)/.exec(c);
        }
        else
        {
            m = /@([^ .:!?,()[\]{}]+)/.exec(c);
        }
        if (!m) {return}
        if (other_way) {return goodify(m[1]).toLowerCase().slice(0,3);}
        else {return m[1].toLowerCase().slice(0,3);}
    }

    function matcher(user, other_way) {
        if (other_way)
        {
            return function () {
                return goodify($(this).find(".comment-user").text()).toLowerCase().slice(0,3) == user
                }
        }
        else
        {
            return function () {
                return $(this).find(".comment-user").text().toLowerCase().slice(0,3) == user
                }
        }
    }

    function replyfilter(id) {
        return function() {
            return in_reply_to[$(this).attr("id")] == id;
        }
    }

    function find_reference() {
        comment_text = $(this).find(".comment-text").text();
        if (who(comment_text))
        {
            fil = matcher(who(comment_text));
            all = $(this).prevAll("tr.comment").filter(fil);
            if (all.length == 0)
            {
                // no name matched, let's try harder
                fil = matcher(who(comment_text, true), true);
                all = $(this).prevAll("tr.comment").filter(fil);
                if (all.length == 0) {return}
            }
            reference_id = all.eq(0).attr("id");
            in_reply_to[$(this).attr("id")] = reference_id;
        }
    }


    // How far may comments be indented?
    // Note that MAX_NESTING = 3 means there are
    // up to *four* levels (including top-level)
    MAX_NESTING = 3

    // How many pixels of indentation per level?
    INDENT = 30

    function indenter(parent) {

        for (var i = MAX_NESTING; i > 0; i--)
        {
            if (parent.hasClass("threading-" + (i-1)) || (i == MAX_NESTING && parent.hasClass("threading-" + i)))
            {
                return function() {
                    $(this).addClass("threading-" + i).find(".comment-text").css({"padding-left": INDENT*i});
                }
            }
        }

        return function() {
            $(this).addClass("threading-1").find(".comment-text").css({"padding-left": INDENT});
        }

    }

    function do_threading(){
        id = $(this).attr("id");
        replies = $(this).nextAll("tr.comment").filter(replyfilter(id));
        ind = indenter($(this));
        replies.each(ind);
        replies.insertAfter(this);
    }

    function go() {
        $("tr.comment").each(find_reference);
        $("tr.comment").each(do_threading);
    }

    $.ajaxSetup({complete: go});
    go();
}

(سرقت غير منظم من Shog9 على meta.stackoverflow لأنه لم ينقله هنا، وعلي حذف منشور التعريف ..)

Answer 7

أيضا، يمكنك حزم البرنامج النصي الخاص بك مع مسج إلى ملحق Chrome. يرى البرامج النصية محتوى جوجل كروم.

ملحقات الكروم، على عكس البرامج النصية Greasemonkey، يمكن التحديث التلقائي نفسه.

Answer 8

حل أسهل: قص + لصق محتويات JQuery.min.js في الجزء العلوي من البرنامج النصي للمستخدم. منتهي.

لقد وجدت مشاكل مختلفة مع الإجابات الموصى بها. يعمل الحل adjquery () على معظم الصفحات ولكن لديه أخطاء على الكثيرين. إذا واجهت مشكلات فقط نسخ + لصق محتويات المسج في البرنامج النصي الخاص بك.

Answer 9

أتساءل عما إذا كنت لا تستطيع الاعتماد على document.defaultView.jQuery في برنامج جي ام جي

if (document.defaultView.jQuery) {
  jQueryLoaded(document.defaultView.jQuery);
} else {
  var jq = document.createElement('script');
  jq.src = 'http://jquery.com/src/jquery-latest.js';
  jq.type = 'text/javascript';
  document.getElementsByTagName('head')[0].appendChild(jq);
  (function() { 
    if (document.defaultView.jQuery) jQueryLoaded(document.defaultView.jQuery);
    else setTimeout(arguments.callee, 100);
  })();
}

function jQueryLoaded($) {
  console.dir($);
}

Answer 10

سيكون نهج آخر تعديل البرنامج النصي لتحميل jQuery يدويا. مثال من http://joanpiedra.com/jquery/greasemonkey/:

// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
function GM_wait() {
    if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
else { $ = unsafeWindow.jQuery; letsJQuery(); }
}
GM_wait();

// All your GM code must be inside this function
function letsJQuery() {
    alert($); // check if the dollar (jquery) function works
}

تحرير: الرقائق! بعد الاختبار، يبدو هذا الرمز لا يعمل نظرا لأن Google Chrome يدير مساليك / امتدادات في نطاق / عملية منفصلة من صفحة الويب الفعلية. يمكنك تنزيل رمز JQUERY باستخدام XMLHTTPRECEST ثم تقييمه، ولكن عليك استضافة التعليمات البرمجية على خادم يسمح تقاسم الموارد عبر الأصل باستخدام Access-Control-Allow-Origin: * رأس. للأسف لا شيء من CDNS الحالي مع jQuery دعم هذا.

Answer 11

امتداد مثالي لتضمين جيسول في وحدة التحكم بالكروم بسيطة كما يمكنك أن تتخيل. يتحرج هذا التمديد أيضا إذا تم دمج JQuery بالفعل في الصفحة.

يستخدم هذا التمديد لتضمين JQuery في أي صفحة تريدها. يسمح باستخدام JQuery في شل وحدة التحكم (يمكنك استدعاء وحدة التحكم Chrome بواسطة "CTRL + SHIFT + J").

لتضمين JQuery في علامة تبويب محددة، انقر فوق الزر Extention.

رابط إلى التمديد: https://chrome.google.com/extensions/detail/gbmifchmngifmadobkcpijhldeelkc.