Quiero escribir un script agregando un elemento a otro elemento con una identificación particular cuando aparece en la página. Se agrega a un documento cuando el usuario se desplaza sobre otro elemento.
En términos de lógica empresarial: cuando el usuario pasa el cursor sobre el nombre de usuario, aparece una ventana emergente. Quiero agregar un botón a un niño en cada una de las ventanas emergentes que aparecen.
Miré esto y me asemejé a esta construcción con el código a continuación, y funciona. El problema es que comprueba solo un elemento y, cuando aparece, finaliza su trabajo. Entiendo que para verificar cada elemento, debo eliminar la línea this.disconnect(); . Eso, sin embargo, solo hace que la página web se cuelgue.
¿Qué debo hacer para que funcione? ¿Estoy haciendo algo mal?
// ==UserScript== // @name ms_teams_integration // @match https://example.com/* // @version 1.0 // @grant none // @run-at document-start // @require https://greasyfork.org/scripts/12228/code/setMutationHandler.js // ==/UserScript== var teamsIcon = ""; // icon in svg format here setMutationHandler(document, '#user-hover-email', function(nodes) { this.disconnect(); nodes.forEach(function(n) { var emailLink = n.getElementsByTagName("a").item(0); var teamsLink = emailLink.cloneNode(true); teamsLink.setAttribute( "href", teamsLink.getAttribute("href") .replace("mailto:", "https://teams.microsoft.com/l/chat/0/0?users=")); teamsLink.setAttribute("target", "_blank"); teamsLink.innerHTML = teamsIcon; n.appendChild(teamsLink); }); });Se bloquea porque su código provoca una nueva mutación, que se detecta una y otra vez. Para evitarlo, verifique si el nuevo elemento ya está agregado:
nodes.forEach(function(n) { if (n.__ms_teams_integration) return; var emailLink = n.getElementsByTagName("a").item(0); // ............... // ............... n.appendChild(teamsLink); n.__ms_teams_integration = true; });