Changement dynamique de favicon plusieurs fois

Question

Je cours un userscript (en utilisant tampermonkey) sur un site, et j'ai une fonction qui est appelée chaque fois que quelque chose d'autre sur la page change.

J'ai une valeur stockée dans quelque chose appelé Available. Si c'est 0, alors je veux utiliser le favicon standard pour le site. Sinon, je veux ajouter une boîte rouge au favicon avec un texte affichant la valeur Available.

Cela fonctionne initialement, mais après Available va> 0, puis == 0, puis> 0 à nouveau, il cesse d'ajouter la boîte rouge avec le texte blanc sur le dessus.

Le code atteint définitivement le point clé à chaque fois que mon journal de console affiche la valeur pour Available est en cours de déclenchement.

Voici ce que j'ai:

if(Available > 0){ 
    var canvas = document.createElement('canvas'); 
    canvas.width = 16;canvas.height = 16; 
    var ctx = canvas.getContext('2d'); 

    var img = new Image(); 
    img.src = '/favicon.ico'; 
    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     ctx.fillStyle = "#F00"; 
     ctx.fillRect(10, 7, 6, 8); 
     ctx.fillStyle = '#FFFFFF'; 
     ctx.font = 'bold 10px sans-serif'; 
     ctx.fillText(Available, 10, 14); 

     var link = document.createElement('link'); 
     link.type = 'image/x-icon'; 
     link.rel = 'shortcut icon'; 
     link.href = canvas.toDataURL("image/x-icon"); 
     document.getElementsByTagName('head')[0].appendChild(link); 
    }; 
} 
else { 
    var canvas2 = document.createElement('canvas'); 
    canvas2.width = 16; 
    canvas2.height = 16; 
    var ctx2 = canvas2.getContext('2d'); 

    var img2 = new Image(); 
    img2.src = '/favicon.ico'; 
    img2.onload = function() { 
     ctx2.drawImage(img2, 0, 0); 

     var link2 = document.createElement('link'); 
     link2.type = 'image/x-icon'; 
     link2.rel = 'shortcut icon'; 
     link2.href = canvas2.toDataURL("image/x-icon"); 
     document.getElementsByTagName('head')[0].appendChild(link2); 
    }; 
} 

Answer 1

Vous avez probablement besoin de supprimer les liens icône précédemment ajoutés, de sorte que le navigateur ne tient pas seulement en utilisant la première que vous avez ajouté:

var oldLinks = document.querySelectorAll('link[rel*="icon"]'); 

for (var i = oldLinks.length - 1; i >= 0; --i) { 
    var ln = oldLinks[i], 
     pn = ln.parentNode; 

    pn.removeChild(ln); 
} 

if (Available > 0) { 
    // as before 
}