jQuery in die JavaScript-Konsole einbinden

Question

Gibt es eine einfache Möglichkeit, jQuery in die JavaScript-Konsole von Chrome für Websites einzubinden, die es nicht verwenden? Ich möchte zum Beispiel auf einer Website die Anzahl der Zeilen in einer Tabelle abfragen. Ich weiß, dass dies mit jQuery wirklich einfach ist.

$('element').length;

Die Website verwendet kein jQuery. Kann ich es über die Befehlszeile hinzufügen?

Answer 1

Führen Sie dies in der JavaScript-Konsole Ihres Browsers aus, dann sollte jQuery verfügbar sein...

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();

HINWEIS: Wenn die Website über Skripte verfügt, die mit jQuery in Konflikt stehen (andere Bibliotheken usw.), kann es dennoch zu Problemen kommen.

Aktualisierung:

Das Beste noch besser zu machen, ein Lesezeichen zu erstellen, ist wirklich praktisch, und ein bisschen Feedback ist auch gut:

1. Klicken Sie mit der rechten Maustaste auf die Lesezeichenleiste, und klicken Sie auf Seite hinzufügen
2. Nennen Sie es, wie Sie möchten, z. B. Inject jQuery, und verwenden Sie die folgende Zeile für die URL:

javascript:(function(e,s){e.src=s;e.onload=function(){jQuery.noConflict();console.log('jQuery injected')};document.head.appendChild(e);})(document.createElement('script'),'//code.jquery.com/jquery-latest.min.js')

Nachstehend finden Sie den formatierten Code:

javascript: (function(e, s) {
    e.src = s;
    e.onload = function() {
        jQuery.noConflict();
        console.log('jQuery injected');
    };
    document.head.appendChild(e);
})(document.createElement('script'), '//code.jquery.com/jquery-latest.min.js')

Hier wird die offizielle jQuery-CDN-URL verwendet, Sie können aber auch Ihr eigenes CDN/Version verwenden.

Answer 2

Führen Sie dies in Ihrer Konsole aus

var script = document.createElement('script');script.src = "https://code.jquery.com/jquery-3.4.1.min.js";document.getElementsByTagName('head')[0].appendChild(script);

Es erstellt ein neues Skript-Tag, füllt es mit jQuery und fügt es an den Kopf an.

Answer 3

Kopieren Sie alles von:
https://code.jquery.com/jquery-3.4.1.min.js

Und fügen Sie es in die Konsole ein. Funktioniert perfekt.

Answer 4

Verwenden Sie die jQueryify-Broschüre:

https://web.archive.org/web/20190502132317/http://marklets.com/jQuerify.aspx

Anstatt den Code in die anderen Antworten zu kopieren und einzufügen, wird er so zu einem klickbaren Lesezeichen.

Answer 5

Beitrag 2020 Methode zu verwenden:

• dynamische Einfuhr
• selbstausführendes IIFE
• asynchrone Funktion

• Pfeilfunktion

  (async () => { await import('https://code.jquery.com/jquery-2.2.4.min.js') // Library ready console.log(jQuery) })()

---

Ohne async, da import gibt eine Versprechen müssen wir verwenden .then() :

import('https://code.jquery.com/jquery-2.2.4.min.js')
  .then( () => {
    console.log(jQuery)
  }
)

Ein weiteres Beispiel

https://caniuse.com/es6-module-dynamic-import