Ubuntu-fr

DonutMan75

[TamperMonkey] Changer la couleur des notifications Facebook ?

Bonsoir,

je souhaite changer de façon automatique et pérenne la couleur des notifications Facebook et passer du rouge vers une couleur plus neutre (un vert pâle par exemple).
Je précise que je ne suis pas développeur web et je ne connais donc pas très bien les langages de programmation du web (html, css, javascript etc..).
Mais enfin, je trouve que c'est un défi amusant à faire ^^

J'utilise Firefox.

J'ai d'abord tenté d'inspecter les boutons de notification : clic droit sur l'élément puis "Inspecter", je regarde un peu le nom des éléments et puis directement l'éditeur de style de Firefox... mais hélas ça n'a rien donné et je n'ai pas réussi à changer les boutons de couleur...

J'ai ensuite tenté TamperMonkey. Je suis au passage surpris qu'il n'y ait aucun script dans leur base de donnée partagée qui ferait un truc similaire... Le contournement des dark pattern/nudge je pensais que c'était assez populaire...

Après pas mal d'essais/erreurs je suis arrivé à ce script qui marchouille :

// ==UserScript==
// @name         Facebook Notification Color Override
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Change la couleur des pastilles de notification Facebook
// @author       Donut
// @match        https://www.facebook.com/*
// @grant        none
// ==/UserScript==


function overrideNotificationColor() {
    // Sélectionner tous les éléments avec la classe "xdj266 blablabla"
    document.querySelectorAll('span[class*="xdj266r x14z9mp xat24cr x1lziwak x1hl2dhg x1vvkbs x6s0dn4 xtk6v10 x78zum5 x5yr21d xl56j7k xexx8yu x18d9i69 xaso8d8 x1gabggj x2b8uid xh8yej3"]').forEach(el => {
        // Remplacer le style par notre propre style
        el.style.cssText = `
background-color: MediumSeaGreen !important;
color: white !important;
border-radius: 50% !important;
`;});
}


// Exécuter toutes les 2 secondes pour capturer les mises à jour dynamiques
setInterval(overrideNotificationColor, 2000);

// Exécuter une première fois au chargement de la page
overrideNotificationColor();

Plusieurs remarques :

• Le nom de l'élément est proprement imbitable : xdj266r etc... etc... A quoi est-ce du ? Une forme d'obfuscation de Facebook ?

• Du coup, je me dis qu'avec un nom comme ça c'est susceptible de changer... Avez-vous des idées pour rendre ce code plus robuste ?

• En pratique, j'observe que la page se charge entièrement avec la couleur rouge pour les pastilles PUIS seulement le script s'applique et les pastilles deviennent vertes.. Avez-vous une idée pour que ça s'affiche vert dès le début ? (ou a minima une piste de recherche) ?

D'une façon générale, que pensez-vous de ce script ? Avez-vous des suggestions d'amélioration ?
(soyez indulgents svp je débute vraiment ^^)

Merci par avance pour vos retours,

Bonne soirée à tous

Donut

DonutMan75

Re : [TamperMonkey] Changer la couleur des notifications Facebook ?

Bon, j'ai trouvé un petit fix en tatonnant...

Si je mets :

// Exécution décalée de 1s (c'est elle qui fonctionne !)
setTimeout(overrideNotificationColor, 500)

Alors la pastille rouge apparaît à peine et est aussitôt remplacée par un joli vert zen.
J'ignore si mon code est pérenne (1) et s'il y a plus élégant (2).
J'ignore également si le setInterval() est nécessaire (par exemple : si je reçois une notif une fois la page chargée...)

Je suis preneur de tout conseil

D.

krodelabestiole

Re : [TamperMonkey] Changer la couleur des notifications Facebook ?

je tenterais plutôt de surcharger une classe CSS existante, que l'approche JavaScript (propre à facebook).

---

nouveau forum ubuntu-fr on en parle là : refonte du site / nouveau design
profil - sujets récurrents - sources du site

DonutMan75

Re : [TamperMonkey] Changer la couleur des notifications Facebook ?

Hello,
merci beaucoup pour la suggestion, je vais creuser dans cette direction là !

DonutMan75

Re : [TamperMonkey] Changer la couleur des notifications Facebook ?

Salut krodelabestiole !

Merci pour ta suggestion, après avoir cherché un peu j'ai trouvé l'add-on Stylus qui semble complètement correspondre à mon besoin.

Après quelques essais, j'ai trouvé la règle suivante qui marche à merveille :

.xdj266r.x14z9mp.xat24cr.x1lziwak.x1hl2dhg.x1vvkbs.x6s0dn4.xtk6v10.x78zum5.x5yr21d.xl56j7k.xexx8yu.x18d9i69.xaso8d8.x1gabggj.x2b8uid.xh8yej3{
    background-color: MediumSeaGreen !important;
    border-radius: 50% !important;
}

A n'appliquer que sur le domaine de Facebook.

Cette fois-ci c'est instantané et il n'y a pas de code JS à exécuter !

Merci beaucoup pour la suggestion !

Pour le sélecteur CSS, je me suis basé sur la documentation W3C qui indique dans son exemple 29 :

The following rule matches any P element whose class attribute has been assigned a list of whitespace-separated values that includes both pastoral and marine:

p.pastoral.marine { color: green }

This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue".

J'ignore pourquoi des noms de sélecteurs aussi alambiqués, j'ai juste inspecté la pastille rouge sous Firefox et j'ai copié/coillé l'intégralité du sélecteur.

On verra si c'est pérenne...

Merci encore et bonne soirée !

D.

sputnick

Re : [TamperMonkey] Changer la couleur des notifications Facebook ?

Si tu fais une copié d'écran de ce que tu veut comme résultat, je peux potentiellement trouver un selecteur CSS plus stable dans le temps.

---

Un seul être vous manque et tout est dépeuplé. Lamartine
https://sputnick.fr