Peux-tu coder une fonction javascript ?
Bien sûr !
Dis-moi simplement :
- Quel est le but de la fonction ?
- Quels sont les paramètres d’entrée et la sortie attendue ?
- Y a-t-il des contraintes ou un contexte particulier (framework, version JS, etc.) ?
Donne-moi un exemple concret, et je te code ça !
Exemple générique :
Voici une fonction JavaScript qui trie une liste de préférences (par exemple, des jeux, livres, films) par ordre de priorité :
/**
* Trie une liste d'objets par priorité décroissante.
* @param {Array} list - Tableau d'objets avec une propriété 'priority' (nombre).
* @returns {Array} Nouveau tableau trié.
*/
function sortByPreference(list) {
return list.slice().sort((a, b) => b.priority - a.priority);
}
// Exemple d'utilisation :
const myList = [
{ name: "Zelda", priority: 3 },
{ name: "Mario", priority: 5 },
{ name: "Metroid", priority: 1 }
];
const sorted = sortByPreference(myList);
console.log(sorted);
// Résultat : [{name: "Mario", ...}, {name: "Zelda", ...}, {name: "Metroid", ...}]Je veux une fonction à intégrer dans tampermonkey. Celle-ci doit identifier un contenu dynamique en fonction de son ID et retourner une alerte lorsque celui-ci change. La fonction doit prendre en paramètre l'url de la page et en fonction de celle-ci elle identifiera l'élément à surveiller et le message à afficher. Elle devra également modifier le titre de la page avec le code de notification, soit ajouter "(1) " avant le titre. Comme l'élément dynamique n'apparaîtra pas forcément tout de suite, la fonction devra utiliser une première fois MutationObserver pour repérer l'élément et une seconde fois pour voir son état modifié. Une fois l'alerte affichée, la balise titre devra reprendre son contenu normal et le cycle recommence.
Voici une solution complète pour Tampermonkey utilisant MutationObserver avec deux phases d'observation :
// ==UserScript==
// @name Dynamic Content Alert
// @namespace your-namespace
// @version 1.0
// @description Surveille les changements d'un élément dynamique et alerte
// @author Vous
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
function startMonitoring(targetUrl, elementId, alertMessage) {
if (!window.location.href.includes(targetUrl)) return;
let originalTitle = document.title;
let observer1, observer2;
// Phase 1 : Détection initiale de l'élément
function initFirstObserver() {
observer1 = new MutationObserver((mutations, obs) => {
const targetElement = document.getElementById(elementId);
if (targetElement) {
obs.disconnect();
initSecondObserver(targetElement);
}
});
observer1.observe(document.body, {
childList: true,
subtree: true
});
}
// Phase 2 : Surveillance des modifications
function initSecondObserver(element) {
observer2 = new MutationObserver((mutations) => {
document.title = `(1) ${originalTitle}`;
alert(alertMessage);
observer2.disconnect();
document.title = originalTitle;
initFirstObserver(); // Redémarre le cycle
});
observer2.observe(element, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
initFirstObserver();
}
// Exemple d'utilisation :
startMonitoring(
"https://exemple.com/page-cible",
"element-dynamique",
"Le contenu a changé !"
);
})();
Fonctionnalités clés :
- Double couche d'observation :
- Gestion du titre dynamique :
- Ajout/retrait du préfixe "(1)" dans le titre^2
- Conservation du titre original après alerte
- Paramétrage flexible :
- Filtrage par URL cible
- ID d'élément personnalisable
- Message d'alerte configurable
- Cycle automatique :
- Réinitialisation complète après chaque alerte
- Surveillance continue des changements^1
Pour l'utiliser :
- Remplacez les paramètres dans
startMonitoring() - Installez le script dans Tampermonkey
- Naviguez vers la page cible
Les observateurs surveillent :
- Modifications d'attributs
- Changements de contenu
- Ajout/suppression d'enfants^6
- Modifications profondes dans l'arborescence^3
Le code respecte les bonnes pratiques de :
- Désactivation propre des observateurs^5
- Gestion de la portée des variables
- Compatibilité cross-domain via
@match^2
<div style="text-align: center">⁂</div>