jQuery Tampermonkey

Adlermania · 15. August 2020

Hey Leute,

ich lerne zur Zeit den Umgang mit JS und jQuery,

nun wollte ich mit jQuery und Tampermonkey ein wenig meine häufig besuchten Webseiten individualisieren.

Dazu wollte ich via Firefox die Hintergrundfarbe der oben angezeigten blauen Facebook Leiste ändern.

Ich habe also erstmal ein Script in Tampermonkey geschrieben, damit man jQuery auch auf facebook.com anwenden kann, dies funktioniert soweit.

Allerdings treten bei mir 2 Probleme auf, ich schaffe es zwar, de Farbe in der FF Konsole zu ändern, aber ich tu mich noch etwas schwer ein passenden Tampermonkey jQuery Script dafür zu verfassen.

Ich versuchte es mit:

Code

jQuery("#js_8").CSS("background-color","red")

Allerdings bekam ich die Fehlermeldung :

Uncaught TypeError: jQuery(...).CSS is not a function

<anonymous> debugger eval code:1

Auch ändert sich nach jedem Neuladen der Seite die id Zahl, mal ist es js_8, mal js_5

Und ich weiß nicht recht, ob ich nun dafür die id oder die class verwenden muss? Denn in der FF Konsole findet sich rechts wo man die "background-color" definiert sieht die Klasse ._2s1x ._2s1y.

Bin für jede Hilfe dankbar.

basti1012 · 15. August 2020

Es wäre es mal gut welche Leiste du genau meinst.
Bei mir ist die komischerweise Weiß und hat keine ID oder klasse die mit deinen angaben übereinstimmen.

Bei mir geht es so.

Code

// ==UserScript==
// @name         facebook leiste farbe
// @namespace    basti1012
// @version      0.11
// @description  wechselt die farbe in der facebook leistwe
// @author       basti1012
// @include      *https://www.facebook.com/*
// @require      http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// @run-at       document-end
// ==/UserScript==
$(document).ready(function(){
$('div ul.taijpn5t').css('background','red');
});

Alles anzeigen

tk1234 · 15. August 2020

Zitat von Adlermania

Uncaught TypeError: jQuery(...).CSS is not a function

Die jQuery-Methode heißt auch »css« und nicht »CSS« … Inwiefern es allerdings sinnvoll ist in 2020 überhaupt noch jQuery zu lernen und nicht bei reinem Javascript zu bleiben sei mal dahingestellt.

Adlermania · 15. August 2020

Hab mal ein Bild gemacht, mit

Code

jQuery("#js_7").css("background-color","red")

in der FF Konsole klappt es, jedoch in Tampermonkey nicht.

So sieht das Ganze bei mir aus:

html-seminar.de/woltlab/attachment/2605/

Adlermania · 15. August 2020

Zitat von tk1234

Die jQuery-Methode heißt auch »css« und nicht »CSS« … Inwiefern es allerdings sinnvoll ist in 2020 überhaupt noch jQuery zu lernen und nicht bei reinem Javascript zu bleiben sei mal dahingestellt.

Also würdest du sagen, jQuery ist heutzutage überflüssig, auch im Bereich web development?

Dachte jQuery hätte einige nützliche Vorteile gegenüber reinem JS ?

Habe vor ca. einem Jahr mit Python angefangen, mach jetzt allerdings eine Webentwickler Weiterbildung und da wird u.a. jQuery gelehrt.

basti1012 · 15. August 2020

Jetzt verstehe ich.

Ich habe die neue Facebook Ansicht genommen.

Da sieht der Code anders aus.

Bei der alten Ansicht sollte das gehen.

Code

$(document).ready(function(){
    $('._2s1y').css('background','red');
});

Zitat von Adlermania

Also würdest du sagen, jQuery ist heutzutage überflüssig, auch im Bereich web development?

Dachte jQuery hätte einige nützliche Vorteile gegenüber reinem JS ?

Habe vor ca. einem Jahr mit Python angefangen, mach jetzt allerdings eine Webentwickler Weiterbildung und da wird u.a. jQuery gelehrt.

Jquery erspart dir in vielen fällen paar zeilen Code.

Es geht aber eigentlich auch alles ohne Jquery.

Zb in diesen fall so

Code

document.addEventListener("DOMContentLoaded", function(event) {
   document.getElementsByClassName('_2s1y')[0].style.background='red';
})

ungetestet

tk1234 · 15. August 2020

Zitat von Adlermania

Dachte jQuery hätte einige nützliche Vorteile gegenüber reinem JS ?

Welche? Das was jQuery vereinfacht und auch browserübergreifend ermöglicht hat geht inzwischen mit Vanilla-JS (also reines Javascript) auch, wobei die Browser da inzwischen alle relativ gleich auf sind was die Unterstützung von Standards angeht. Ja, es gibt Unterschiede aber die sind längst nicht mehr so groß wie früher.

tk1234 · 15. August 2020

Zitat von basti1012

Zb hier so

Code

document.addEventListener("DOMContentLoaded", function(event) {
   document.getElementsByClassName('_2s1y')[0].style.background='red';
})

ungetestet

document.querySelector existiert, damit lassen sich auch andere Selektoren als einfache Klassennamen verwenden (wie mit Jquery('…')/$('…')). Ggf. auch querySelectorAll um mehrere Elemente abzufrühstücken (das dann aber ggf. mit for o.ä.).

basti1012 · 16. August 2020

Das stimmt,
Gerade, wenn man JQuery gewohnt ist,ist die Schreibweise einfacher

Wenn man etwas übertreibt könnte man bei den HTML

Code

<body>
    <main>
       <div class="test">
          <p>text</p>
        </div>
    </main>
</body>

mit Vanilla JS ( ohne querySelector ) so ein JS Code haben.

Code

tag1=document.getElementsByTagName('body')[0];
tag2=tag1.getElementsByTagName('main')[0];
tag3=tag2.getElementsByClassName('test')[0];
tag4=tag3.getElementsByTagName('p')[0];
tag4.style.background='red';

Mit querySelector ist es einfacher ( wie Jquery ) und kürzer

Code

document.querySelector('body main .test p').style.background='red';

Mit Jquery so

Code

$('body main .test p').css('background','red');

Wie man sieht ist das mit Jquery auch nicht viel kleiner,bei diesen Beispiel,

tk1234 · 16. August 2020

Zitat von basti1012

Wie man sieht ist das mit Jquery auch nicht viel kleiner,bei diesen Beispiel,

Doch, es ist deutlich kleiner: du darfst nicht vergessen dass du jQuery auch noch laden musst und das sind dann nochmal rund 90k - da brauchst du schon sehr viel Code dass Vanilla-JS größer ist als jQuery-Code.

Adlermania · 16. August 2020

Super vielen Dank dann versuch ich mich gleich auf reines JS zu fokussieren.

Der jQuery Code funktioniert nun in Tampermonkey, allerdings der reine JS Code noch nicht:

Code

document.addEventListener("DOMContentLoaded", function(event) {
   document.getElementsByClassName('_2s1y')[0].style.background='red';
})

Liegt das daran, dass ich noch den jQuery Script über fb laufen lasse?

Und zweite Frage, wie müsste ich diesen Code zu reinem JS umformulieren?

Code

jQuery("#pagelet_ego_pane").remove()

tk1234 · 16. August 2020

Zitat von Adlermania

Liegt das daran, dass ich noch den jQuery Script über fb laufen lasse?

Vanilla-JS und jQuery-JS können parallel genutzt werden, was bei dir "nicht funktioniert" kann ich so auch nicht sagen. Tampermonkey habe ich aber auch nicht installiert, deswegen kann ich es nicht direkt testen - wenn ich aber in der ersten Zeile »document.body.addEventListener("click", function(event) {« verwende (also ein click-Event auf body) wird die Titelzeile beim Klicken auf die Seite rot.

Zitat
Und zweite Frage, wie müsste ich diesen Code zu reinem JS umformulieren?
Code
jQuery("#pagelet_ego_pane").remove()

mit

Code

let del = document.getElementById('pagelet_ego_pane');
del.parentNode.removeChild(del);

oder

Code

document.getElementById('pagelet_ego_pane').remove();

siehe https://wiki.selfhtml.org/wiki…ript/DOM/Node/removeChild (wobei in beiden Fällen ggf. noch eine Prüfung auf Existenz des zu löschenden Elements hilfreich wäre)

basti1012 · 16. August 2020

Zitat von Adlermania

Der jQuery Code funktioniert nun in Tampermonkey, allerdings der reine JS Code noch nicht:

Bei mir läuft beides.

Wie ich bei tk1234 lese wird es bei sein test auch in der richtung laufen.

Du könntest mal in der Konsole schaun ob da irgendein error steht.

Hast du noch mehr TM-Scripte auf FB laufen ?

Falls ja, könnte es sein das es da irgendein überschreiben oder sonst was gibt.

Bei meinen Beitrag #2 siehst du das ich

Code

// @run-at       document-end

nutze.

Versuche das bitte auch mal.

Adlermania · 17. August 2020

Ja // @run-at document-end hatte ich auch so eingestellt.

Ansonsten läuft kein anderer Script auf der fb seite, ich poste mal das ganze Konstrukt:

Code

// ==UserScript==
// @name         facebook.com
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        *://*.facebook.com/*
// @run-at       document-end
// @require      https://code.jquery.com/jquery-3.5.1.min.js
// @grant        none
// ==/UserScript==


document.addEventListener("DOMContentLoaded", function(event) {
   document.getElementsByClassName('_2s1x')[0].style.background='red';
})


document.getElementById('pagelet_ego_pane').remove();


(function() {
    'use strict';

    // Your code here...
})();

Alles anzeigen

Die ads verschwinden, allerdings bleibt die Farbe immer noch blau.

basti1012 · 17. August 2020

probier es mal so

Code

// ==UserScript==
// @name         facebook leiste
// @namespace    ich
// @version      0.11
// @description  wechselt die farbe in der facebook leiste
// @author       you
// @include      *https://www.facebook.com*
// @run-at       document-end
// ==/UserScript==
 
(function() {
    'use strict';
   document.addEventListener("DOMContentLoaded", function(event) {
       document.getElementsByClassName('_2s1y')[0].style.background='red';
       document.getElementById('pagelet_ego_pane').remove();
   })
})();

Alles anzeigen

Adlermania · 17. August 2020

Da passiert bei mir leider gar nichts, auch

Code

document.getElementById('pagelet_ego_pane').remove();

wird damit nicht mehr ausgeführt.

Adlermania · 17. August 2020

Das müssten die beiden Klassen sein, wenn ich mich nicht täusche?

Code

._2s1x ._2s1y {
    background-color: rgb(56, 86, 149);
    border-bottom-color: rgb(54, 93, 163);

basti1012 · 17. August 2020

Versuche es mal so

Code

document.addEventListener("DOMContentLoaded", function(event) {
       document.querySelector('._2s1y').style.background='red';
 });

Bei mir gehen alle Varianten die ich gepostet habe.

Laß das remove ding erstmal weg und versuche nur das.

Ich finde auch nix was du da removen willst

Adlermania · 17. August 2020

Code

// ==UserScript==
// @name         facebook.com
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        *://*.facebook.com/*
// @run-at       document-end
// @grant        none
// ==/UserScript==


document.addEventListener("DOMContentLoaded", function(event) {
       document.querySelector('._2s1x').style.background='red';
 });

Alles anzeigen

Tut sich leider auch nichts.

pagelet_ego_pane ist bei mir die große Box mit den Werbeanzeigen, die sich ständig ändern. Die konnte ich erfolgreich ausblenden, nur an der bluebar oben tut sich gar nichts. Vll. könnte ich mal probeweise versuchen eine andere Farbe zu ändern, z.B. wenn man ein Chatfenster öffnet werden die eigenen Nachrichten ja blau hinterlegt, aber das ganze ist ziemlich verschachtelt im Code. Müsste so im Bereich ._4gx_ sein, allerdings find ich da im CSS Teil keine zugewiesene Farbe =/.

Adlermania · 17. August 2020

Okay habe jetzt auch mal zur neuen fb Ansicht gewechselt, ist vll. etwas einfacher dort. Wie könnte ich bei der neuen Ansicht die blaue Farbe des Chathintergrunds ändern?

jQuery Tampermonkey

Jetzt mitmachen!

Teilen