Un consejo rápido para ocultar las superposiciones de extensiones del navegador

En mi experiencia, la mayoría de las superposiciones de extensiones de navegador usan un fondo con el tipo de datos: imagen/svg+xml. Además, cada una de estas superposiciones utiliza estilos en línea (en lugar de hojas de estilo externas) para representar sus botones (o cualquier control que opten por representar).

Esto significa que podemos usar algunas técnicas de JavaScript para encontrar elementos que tengan estos atributos y luego alternar su visibilidad.

Pero primero, ¿por qué nos importaría siquiera esconderlos?

Ocultar superposiciones de extensiones del navegador

En términos generales, cada vez que se muestran estas superposiciones, es para guardarlas en algún servicio de marcadores, ya sea Pinterest, Buffer, Pocket o cualquier otro.

Casos de uso relevantes

Además, al menos en el caso del que estoy hablando, se procesan cada vez que el cursor pasa sobre una imagen. Pero, ¿y si no queremos que eso suceda?

Caso en punto:

• Tal vez estemos trabajando en un complemento que activará su superposición y queremos ocultar otras ventanas emergentes.
• O tal vez activamos otra ventana emergente que contiene imágenes y no queremos que las superposiciones aparezcan en esas imágenes.

Cualquiera que sea el caso, aquí hay una forma de ocultar las superposiciones según sus necesidades.

El proceso

Dado que WordPress incluye jQuery de forma predeterminada, lo usaré como la biblioteca de elección. Pero esto podría usarse fácilmente encontrando todos los elementos por un nombre de clase específico e iterándolos (si opta por usar JavaScript estándar).

Primero, queremos comenzar con el  elemento body y luego mirar, digamos, todos los  elementos span (dado que esos tienden a ser los elementos más populares, nuevamente, solo en mi experiencia, y prepararnos para iterar a través de ellos ):

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

A continuación, queremos verificar la presencia de data:image/svg+xml en el atributo de estilo en línea. Y, si se encuentra, cambie la visibilidad del elemento :

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

Si desea alternar la visibilidad del elemento, deberá configurar una segunda cláusula que eliminará el  valor oculto cuando sea necesario. Si quieres hacer eso, puedes agregar fácilmente esto :

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 función final puede ser algo como esto :

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');
          }
      });
};

Entonces solo necesita llamar hideExtensions();cuando sea necesario.

Una palabra sobre el rendimiento

Debido a que estamos escaneando un subconjunto de elementos en el DOM, esto puede convertirse en un problema de rendimiento, especialmente si hay muchos elementos de un solo tipo.