Comment utiliser jQuery dans les scripts Greasemonkey dans Google Chrome?
comme certains d'entre vous le savent peut-être, GoogleChrome a fortement limité les scripts Greasemonkey.
Chrome ne supporte pas
@require,@resource,unsafeWindow,GM_registerMenuCommand,GM_setValue, ouGM_getValue.
sans exiger, Je ne peux pas trouver un moyen d'inclure la bibliothèque jQuery dans Greasemonkey script sous Google Chrome.
quelqu'un at-il des conseils à ce sujet?
11 réponses
à Partir de "Script Utilisateur Astuce: à l'Aide de jQuery - Erik Vold Blog"
// ==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);
j'ai écrit quelques fonctions basées sur le script D'Erik Vold pour m'aider à exécuter des fonctions, du code et d'Autres scripts dans un document. Vous pouvez les utiliser pour charger jQuery dans la page et ensuite lancer le code sous la portée globale window .
Exemple D'Usage
// ==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");
});
Vous pouvez cliquez ici pour l'installer, si vous avez confiance que je ne suis pas en train de vous tromper dans l'installation de quelque chose malveillant et que personne n'a édité mon post pour pointer vers quelque chose d'autre. Rechargez la page et vous devriez voir une frontière autour de mon poste.
fonctions
load(url, onLoad, onError)
charge le script à url dans le document. Optionnellement, des callbacks peuvent être fournis pour onLoad et onError .
execute(functionOrCode)
Insère une fonction ou une chaîne de code dans le document et l'exécute. Les fonctions sont converties en code source avant d'être insérées, de sorte qu'elles perdent leur portée/fermeture actuelle et sont exécutées sous la portée globale window .
loadAndExecute(url, functionOrCode)
un raccourci; cela charge un script de url , puis insère et exécute functionOrCode si réussi.
Code
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); });
}
Utiliser jQuery sans peur des conflits , en appelant jQuery.noConflict(true) . Comme ceci:
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);
}
mais, pour les scripts de cross-browser, pourquoi ne pas profiter d'une copie locale rapide de jQuery, quand vous le pouvez?
fonctionne comme un Chrome userscript et un Greasemonkey script, et il utilise la copie locale de nice @require de jQuery, si la plate-forme prend en charge.
// ==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);
}
si la page a déjà jQuery, alors il suffit de suivre ce modèle:
// ==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);
la manière simple est d'utiliser required mot clé:
// @require http://code.jquery.com/jquery-latest.js
il y a un moyen vraiment facile de se déplacer, y compris une copie complète de jQuery pour les scripts Chrome quand ces scripts n'utilisent pas réellement de fonctionnalités privilégiées (fonctions GM_*, etc)...
insérez simplement le script lui-même dans le DOM de la page et exécutez! La meilleure partie est que cette technique fonctionne tout aussi bien sur Firefox+Greasemonkey, de sorte que vous pouvez utiliser le même script pour les deux:
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();
}
(volé sans autorisation) de Shog9 sur meta.stackoverflow puisqu'il ne l'a pas déplacé ici, et je dois supprimer le meta post..)
vous pouvez aussi empaqueter votre script avec jQuery to Chrome extension. Voir GoogleChrome Content Scripts .
les extensions Chrome, contrairement aux scripts Greasemonkey, peuvent se mettre à jour automatiquement.
solution plus facile: couper+coller le contenu de jquery.min.js dans le haut de votre script utilisateur. Faire.
j'ai trouvé divers problèmes avec les réponses recommandées. La solution addJQuery () fonctionne sur la plupart des pages mais a des bugs sur beaucoup. Si vous rencontrez des problèmes, copiez+collez le contenu de jquery dans votre script.
je me demande si vous ne pouvez pas compter sur document.defaultView.jQuery dans votre script GM ala:
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($);
}
une autre approche serait de modifier votre script pour charger jQuery manuellement. Exemple de 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
}
EDIT: DRATS! après les tests, il semble que ce code ne fonctionne pas puisque Google Chrome exécute userscripts/extensions dans un champ d'application/processus séparé de la page Web réelle. Vous pouvez télécharger le code jQuery en utilisant une XmlhttpRequest et ensuite L'évaluer, mais vous devez héberger le code sur un serveur qui autorise Cross-Origin Resource Sharing en utilisant l'en-tête Access-Control-Allow-Origin: * . Malheureusement aucun des CDNs actuels avec jQuery supporte ceci.
extension parfaite pour intégrer jQuery dans la Console Chrome aussi simple que vous pouvez l'imaginer. Cette extension indique également si jQuery a déjà été Embedded dans la page.
cette extension utilisée pour intégrer jQuery dans n'importe quelle page que vous voulez. Il permet d'utiliser jQuery dans le shell de la console (vous pouvez invoquer la console Chrome par "Ctrl+Shift+j").
pour intégrer jQuery dans l'onglet sélectionné cliquez sur le bouton extension.
lien vers l'extension: https://chrome.google.com/extensions/detail/gbmifchmngifmadobkcpijhhldeeelkc