jQuery Tampermonkey

basti1012 · 17. August 2020

Warum kopierst du nicht 1 zu 1 ?

Dann geht es wahrscheinlich auch

zb

Code

// @match        *://*.facebook.com/*

funktioniert nur auf die Facebookseiten die am Ende ein / haben.

Das heißt das auf facebook.com das Script nicht läuft.

Also versuche es nochmal so komplett kopieren

Code

// ==UserScript==
// @name         facebook.com
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  neue Farbe für Facebook navi
// @author       You
// @include      *facebook.com*
// @run-at       document-end
// ==/UserScript==
(function() {
    'use strict';
document.addEventListener("DOMContentLoaded", function(event) {
       document.querySelector('._2s1y').style.background='red';
 });
})();

Alles anzeigen

Adlermania · 18. August 2020

Also ich bekomm es jetzt in der neuen Version hin die Hintergrundfarbe der eigenen Chatnachrichten zu ändern.

Allerdings nur im Dev Tool. Da sieht der Style Bereich bei mir so aus:

CSS

.d1544ag0 {
    padding-right: 12px;
}
[data-darkreader-inline-bgcolor] {
    background-color: #68230e !important;
}

Im HTML Bereich sind da allerdings alle Klassen zusammengefasst, da sieht das ganze so aus:

Code

<div class="l60d2q6s d1544ag0 sj5x9vvc tw6a2znq l9j0dhe7 ni8dbmo4 stjgntxs qlfml3jp inkptoze e72ty7fz qmr60zad jm1wdb64 qv66sw1b ljqsnud1 g6srhlxm" style="background-color: rgb(0, 132, 255); --darkreader-inline-bgcolor:#006fd6;" data-darkreader-inline-bgcolor="">

Wie bekomm ich jetzt die richtige Klasse für background-color: #68230e raus? Oder gehört das zur drüberstehenden Klasse .d1544ag0?

basti1012 · 19. August 2020

Ich verstehe das nicht ganz.
Wenn du über die DEV Tools deinen Bereich eine neue Farbe geben kannst, dann kannst du die Klasse auch auslesen.
Nehmen wir mal an das du hier unten im Schreibfeld die Hintergrundfarbe ändern willst.
Klickst du da auf den Pfeil und schon hast du das, was du für die CSS brauchst.

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

Deine css sollte dan so aussehen

Code

div#redactor-uuid-0 {
    background: red;
/* notfalls mit !important */
}

Für Javascript dann so

Code

document.querySelector('div#redactor-uuid-0').style.background='red';

Man kann mit Tampermonkey auch Css einfügen.

https://stackoverflow.com/ques…quivalent-in-tampermonkey

Adlermania · 19. August 2020

Okay, vielen Dank. Bei mir sieht es so aus:

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

Mich irritiert nur dieses [data-darkreader-inline-bgcolor], soll ich das dann nehmen anstatt einer Klasse? Wenn ich auf neue Regel hinzufügen gehe, zeigt er mir nämlich mehrere Klassen an: .l60d2q6s.d1544ag0.sj5x9vvc.tw6a2znq.l9j0dhe7.ni8dbmo4.stjgntxs.qlfml3jp.inkptoze.e72ty7fz.qmr60zad.jm1wdb64.qv66sw1b.ljqsnud1.g6srhlxm

basti1012 · 19. August 2020

Zitat von Adlermania

Mich irritiert nur dieses [data-darkreader-inline-bgcolor], soll ich das dann nehmen anstatt einer Klasse? Wenn ich auf neue Regel hinzufügen gehe, zeigt er mir nämlich mehrere Klassen an: .l60d2q6s.d1544ag0.sj5x9vvc.tw6a2znq.l9j0dhe7.ni8dbmo4.stjgntxs.qlfml3jp.inkptoze.e72ty7fz.qmr60zad.jm1wdb64.qv66sw1b.ljqsnud1.g6srhlxm

Theoretisch kannst du das komplett so nehmen

Code

document.querySelector('.l60d2q6s.d1544ag0.sj5x9vvc.tw6a2znq.l9j0dhe7.ni8dbmo4.stjgntxs.qlfml3jp.inkptoze.e72ty7fz.qmr60zad.jm1wdb64.qv66sw1b.ljqsnud1.g6srhlxm').style.background='red';

Sieht aber blöd aus.

Ich glaube das es so auch gehen sollte

Code

document.querySelector('[data-darkreader-inline-bgcolor]').style.background='red';

Ich würde da einfach mal jede Klasse testen, bzw die nehmen wo Facebook die Background Farbe gesetzt hat.

Was willst du den jetzt da genau ändern bei Facebook ?

Ich kann den Code da jetzt nicht finden.

Kannst du mal ein Bild machen wo du welche Farbe ändern willst ?

Adlermania · 19. August 2020

Würde gerne hier

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

die blaue Farbe ändern, hab auch schon die passende Klasse gefunden: .q66pz984

Hab es jetzt mal mit

Code

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

probiert, tut sich aber noch nichts.

basti1012 · 20. August 2020

Ich kann es leider nicht testen weil es bei mir alles anders aussieht( neue und alte Ansicht ).

Auch keine von den Klassen finde ich da.

Verstehe ich auch nicht , aber bin zu selten bei FB.

Du könntest auch mal versuchen die Parents mit einzubeziehen

Code

document.querySelector('span.q66pz984').style.color='red';
oder
document.querySelector('div .q66pz984').style.color='red';
oder die nächste parent id ( geraten , mußt du mal im Code kucken )
document.querySelector('#facebook > .q66pz984').style.color='red';

Wenn FB so aussehen würde wie bei dir könnte ich es selber testen , aber da passt irgendwie gar nix überein.

Teste auch mal !important bei den Varianten

Code

document.querySelector('.q66pz984').style.setProperty("color", "red", "important")

jQuery Tampermonkey

Jetzt mitmachen!

Teilen