Un conseil rapide pour masquer les superpositions d’extensions de navigateur

D’après mon expérience, la plupart des superpositions d’extensions de navigateur utilisent un arrière-plan avec le type de data:image/svg+xml. De plus, chacune de ces superpositions utilise des styles en ligne (plutôt que des feuilles de style externes) pour rendre leurs boutons (ou les contrôles qu’ils choisissent de rendre).

Cela signifie que nous pouvons utiliser certaines techniques JavaScript pour trouver des éléments avec ces attributs, puis basculer leur visibilité.

Mais d’abord, pourquoi prendrions-nous même soin de les cacher ?

Masquer les superpositions d’extensions de navigateur

De manière générale, chaque fois que ces superpositions sont affichées, c’est pour les enregistrer dans un service de bookmarking, que ce soit Pinterest, Buffer, Pocket ou autre chose.

Cas d’utilisation pertinents

De plus, au moins dans le cas dont je parle, ils s’affichent chaque fois que le curseur passe sur une image. Mais que faire si nous ne voulons pas que cela se produise.

Exemple :

• Nous travaillons peut-être sur un plugin qui déclenchera sa superposition, et nous voulons masquer d’autres pop-ups.
• Ou peut-être que nous déclenchons une autre fenêtre contextuelle contenant des images et que nous ne voulons pas que les superpositions apparaissent sur ces images.

Quoi qu’il en soit, voici une façon de masquer les superpositions en fonction de vos besoins.

Le processus

Étant donné que WordPress inclut jQuery par défaut, je vais l’utiliser comme bibliothèque de choix. Mais cela pourrait tout aussi bien être utilisé en trouvant tous les éléments par un nom de classe spécifié et en les parcourant (si vous choisissez d’utiliser du JavaScript vanille).

Tout d’abord, nous voulons commencer par l’  élément body, puis examiner, disons, tous les  éléments span (car ceux-ci ont tendance à être les éléments les plus populaires – encore une fois, juste d’après mon expérience – et nous préparer à les parcourir ):

var hideExtensions = function() {
    $('body')
      .children('span')
      .each(function() {
      });
};

Ensuite, nous voulons vérifier la présence de data:image/svg+xml dans l’attribut de style en ligne. Et, s’il est trouvé, alors changez la visibilité de l’élément :

if (-1 !== $(this).attr('style').indexOf('data:image/svg+xml;')) {
  if ('hidden' !== $(this).css('visibility')) {
    $(this).css('visibility', 'hidden');
  }
}

Si vous souhaitez basculer la visibilité de l’élément, vous devrez configurer une deuxième clause qui supprimera la  valeur masquée si nécessaire. Si vous voulez faire cela, vous pouvez facilement ajouter ceci :

if (-1 !== $(this).attr('style').indexOf('data:image/svg+xml;')) {
    if ('hidden' !== $(this).css('visibility')) {
        $(this).css('visibility', 'hidden');
    }
} else {
    $(this).css('visibility', 'visible');
}

La fonction finale peut ressembler à ceci :

var hideExtensions = function() {

  $('body')
      .children('span')
      .each(function() {
          if (-1 !== $(this).attr('style').indexOf('data:image/svg+xml;')) {
              if ('hidden' !== $(this).css('visibility')) {
                  $(this).css('visibility', 'hidden');
              }
          } else {
              $(this).css('visibility', 'visible');
          }
      });
};

Ensuite, il vous suffit d’appeler hideExtensions();en cas de besoin.

Un mot sur les performances

Parce que nous analysons un sous-ensemble d’éléments dans le DOM, cela peut devenir un problème de performances, surtout s’il y a beaucoup d’éléments d’un même type.