Uma dica rápida para ocultar as sobreposições de extensão do navegador

Na minha experiência, a maioria das sobreposições de extensão do navegador usa um plano de fundo com o tipo de data:image/svg+xml. Além disso, cada uma dessas sobreposições usa estilos embutidos (em vez de folhas de estilo externas) para renderizar seus botões (ou quaisquer controles que estejam optando por renderizar).

Isso significa que podemos usar algumas técnicas de JavaScript para encontrar elementos com esses atributos e, em seguida, alternar sua visibilidade.

Mas primeiro, por que nos importaríamos em escondê-los?

Ocultar sobreposições de extensão do navegador

De um modo geral, sempre que essas sobreposições estão em exibição, é para salvar em algum serviço de favoritos, seja Pinterest, Buffer, Pocket ou qualquer outro.

Casos de uso relevantes

Além disso, pelo menos no caso de que estou falando, eles renderizam sempre que o cursor passa sobre uma imagem. Mas e se não quisermos que isso aconteça.

Caso em questão:

• Talvez estejamos trabalhando em um plugin que acionará sua sobreposição e queremos ocultar outros pop-ups.
• Ou talvez acionemos outro pop-up que contenha imagens e não queremos que as sobreposições apareçam nessas imagens.

Seja qual for o caso, aqui está uma maneira de ocultar as sobreposições, dependendo de suas necessidades.

O processo

Como o WordPress inclui jQuery por padrão, vou usá-lo como a biblioteca de escolha. Mas isso pode ser facilmente usado encontrando todos os elementos por um nome de classe especificado e iterando por eles (se você optar por usar JavaScript vanilla).

Primeiro, queremos começar com o  elemento body e, em seguida, examinar, digamos, todos os  elementos span (já que esses tendem a ser os elementos mais populares – novamente, apenas na minha experiência – e nos preparar para iterar por eles ):

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

Em seguida, queremos verificar a presença de data:image/svg+xml no atributo de estilo embutido. E, se for encontrado, altere a visibilidade do elemento :

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

Se você quiser alternar a visibilidade do elemento, precisará configurar uma segunda cláusula que removerá o  valor oculto quando necessário. Se você quiser fazer isso, pode adicionar facilmente isso :

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

A função final pode ser algo assim :

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

Então você só precisa ligar hideExtensions();quando necessário.

Uma palavra sobre desempenho

Como estamos verificando um subconjunto de elementos no DOM, isso pode se tornar um problema de desempenho, especialmente se houver muitos elementos de um único tipo.