Una punta rapida per nascondere le estensioni del browser

Nella mia esperienza, la maggior parte delle sovrapposizioni di estensione del browser utilizza uno sfondo con il tipo di dati: Image/SVG+XML. Inoltre, ciascuna di queste sovrapposizioni utilizza stili in linea (piuttosto che fogli di stile esterni) per eseguire il rendering dei pulsanti (o di qualsiasi controllo stiano optando per il rendering).

Ciò significa che possiamo usare alcune tecniche JavaScript per trovare elementi con che hanno questi attributi e quindi alternare la loro visibilità.

Ma prima, perché dovremmo nemmeno nasconderli?

Nascondere le sovrapposizioni di estensione del browser

In generale, ogni volta che questi overlay sono in mostra, è per salvarli in qualche servizio di bookmarking che si tratti di Pinterest, Buffer, Pocket o qualcos’altro.

Caso d’uso pertinenti

Inoltre, almeno nel caso di cui sto parlando, rendono ogni volta che il cursore passa sopra un’immagine. Ma cosa succede se non vogliamo che ciò accada.

Caso in questione:

• Forse stiamo lavorando su un plug-in che attiverà la sua sovrapposizione e vogliamo nascondere altri pop-up.
• O forse attiviamo un altro pop-up che contiene immagini e non vogliamo che le sovrapposizioni appaiano su quelle immagini.

In ogni caso, ecco un modo per nascondere le sovrapposizioni a seconda delle tue esigenze.

Il processo

Poiché WordPress include jQuery per impostazione predefinita, lo userò come libreria preferita. Ma questo potrebbe essere utilizzato altrettanto facilmente trovando tutti gli elementi in base a un nome di classe specificato e scorrendoli (se si sceglie di utilizzare JavaScript vanilla).

Per prima cosa, vogliamo iniziare con l’ elemento body e poi guardare, diciamo, tutti gli elementi span (poiché quelli tendono ad essere gli elementi più popolari – di nuovo, solo nella mia esperienza – e ci prepariamo a scorrerli ):

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

Successivamente, vogliamo verificare la presenza di data:image/svg+xml nell’attributo di stile inline. E, se viene trovato, cambia la visibilità dell’elemento :

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

Se vuoi attivare o disattivare la visibilità dell’elemento, dovrai impostare una seconda clausola che rimuoverà il  valore nascosto quando necessario. Se vuoi farlo, puoi facilmente aggiungere questo :

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 funzione finale potrebbe assomigliare a questa :

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

Quindi devi solo chiamare hideExtensions();quando necessario.

Una parola sulle prestazioni

Poiché stiamo eseguendo la scansione di un sottoinsieme di elementi nel DOM, questo può diventare un po’ un problema di prestazioni, soprattutto se sono presenti molti elementi di un unico tipo.