Wie kann ich jQuery in Greasemonkey-Skripte in Google Chrome?
https://stackoverflow.com/questions/2246901
-
20-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Wie einige von euch vielleicht wissen, hat Google Chrome einige schwerwiegende Einschränkung setzt auf Greasemonkey-Skripte.
Chromium nicht unterstützt
@require,@resource,unsafeWindow,GM_registerMenuCommand,GM_setValueoderGM_getValue.
Ohne erfordern, kann ich nicht einen Weg finden, die jQuery-Bibliothek in Greasemonkey-Skript unter Google Chrome enthalten.
hat jemand einen Rat in dieser Angelegenheit?
Lösung
Von "User Script Tipp: Mit 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);
Andere Tipps
Ich habe ein paar Funktionen geschrieben, basierend auf der Erik Vold Drehbuch Hilfe laufen mir laufen Funktionen, Code und andere Skripte in einem Dokument. Sie können sie verwenden jQuery in der Seite zu laden und dann Code unter dem globalen window Umfang ausgeführt werden.
Beispiel Verwendung
// ==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");
});
Sie können hier klicken es zu installieren, wenn Sie darauf vertrauen, dass ich versuche, Sie nicht dazu zu bringen, etwas zu installieren bösartig und dass niemand meinen Beitrag zu Punkt auf etwas anderes editiert. Aktualisieren Sie die Seite und Sie sollten einen Rahmen um meinen Beitrag zu sehen.
Funktionen
load(url, onLoad, onError)
Lädt das Skript bei url in das Dokument. Optional können Rückrufe für onLoad und onError zur Verfügung gestellt.
execute(functionOrCode)
Fügt eine Funktion oder eine Kette von Code in das Dokument und führt sie aus. Die Funktionen werden auf den Quellcode umgewandelt, bevor sie eingeführt werden, so dass sie ihre aktuellen Bereich / Verschlüsse verlieren und werden unter dem globalen window Umfang ausgeführt werden.
loadAndExecute(url, functionOrCode)
Eine Verknüpfung; Dies lädt ein Skript aus url, dann Einsätze und führt functionOrCode wenn sie erfolgreich sind.
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); });
}
Mit jQuery ohne Angst vor Konflikten , durch jQuery.noConflict(true) Aufruf. Wie so:
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);
}
Aber Für Cross-Browser-Scripts, warum nicht die Vorteile einer schönen nehmen, schnell, lokale Kopie von jQuery, wenn Sie können?
Die folgenden Werke als Chrome und einem userscript Greasemonkey-Skript, und es nutzt die schöne lokale @require Kopie von jQuery, wenn die Plattform unterstützt wird.
// ==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);
}
Wenn die Seite bereits jQuery hat, dann folgen Sie einfach dieser Vorlage:
// ==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);
Der einfache Weg ist mit required Stichwort:
// @require http://code.jquery.com/jquery-latest.js
Es ist eine wirklich einfache Art und Weise eine vollständige Kopie von jQuery für Chrome-Skripte zu umgehen, einschließlich , wenn diese Skripte tatsächlich keine privilegierten Eigenschaften (GM_ * Funktionen, usw.) ...
Setzen Sie einfach das Skript selbst in die Seite DOM und ausführen! Der beste Teil ist, dass diese Technik genauso gut auf Firefox + Grease funktioniert, so dass Sie das gleiche Skript für beide verwenden können:
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();
}
(unapologetically von Shog9 auf meta.stackoverflow gestohlen, da er es nicht hier rührte sich, und ich muss die Meta-Post löschen ..)
Auch könnten Sie Ihr Skript mit jQuery zu Chrome-Erweiterung packen. Siehe Google Chrome Inhalt Scripts .
Chrome-Erweiterungen, im Gegensatz zu Greasemonkey-Skripte kann Auto-Update selbst.
einfachere Lösung: cut + den Inhalt jquery.min.js in der Spitze Ihres Benutzerskript einfügen. Getan.
fand ich verschiedene Probleme mit den empfohlenen Antworten. Die addJQuery () Lösung funktioniert auf den meisten Seiten hat aber Fehler auf vielen. Wenn Sie auf Probleme stoßen einfach kopieren + die jquery Inhalt in Ihr Skript einfügen.
Ich frage mich, wenn Sie nicht auf document.defaultView.jQuery in Ihrem GM-Skript ala verlassen können:
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($);
}
Ein weiterer Ansatz wäre Ihr Skript laden jQuery manuell zu ändern. Beispiel von 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 Nach dem Testen sie diesen Code erscheint nicht funktioniert, da Google Chrome läuft userscripts / Erweiterungen in einem separaten Rahmen / Prozess von der aktuellen Webseite. Sie können die jQuery-Code herunterladen ein XMLHttpRequest und anschließend Eval es, aber Sie haben den Code auf einem Server hosten, die Cross-Origin Resource Sharing den Access-Control-Allow-Origin: * Header verwenden. Leider KEINE der aktuellen CDNs mit jQuery dies unterstützen.
Perfekte Erweiterung einzubetten jQuery in Chrome-Konsole so einfach, wie man sich vorstellen kann. Diese Erweiterung auch indocates wenn jQuery wurde bereits in Seite eingebettet.
Diese Erweiterung einzubetten jQuery in jede Seite verwendet Sie wollen. Es ermöglicht jQuery in der Konsolen-Shell zu verwenden (Sie können Chrome-Konsole aufrufen, indem Sie "Strg + Shift + j").
Zum Einbetten jQuery in ausgewählten Registerkarte, klicken Sie auf extention-Taste.
Link zur Erweiterung: https://chrome.google.com/extensions/detail/gbmifchmngifmadobkcpijhhldeeelkc
