Pikavinkki selaimen laajennuspeittokuvien piilottamiseen

Kokemukseni mukaan useimmat selainlaajennuspeittokuvat käyttävät taustaa, jonka tyyppi on data:image/svg+xml. Lisäksi jokainen näistä peittokuvista käyttää sisäisiä tyylejä (ei ulkoisia tyylisivuja) painikkeidensa hahmontamiseen (tai mitä tahansa ohjaimia, joita ne valitsevat renderöidäkseen).

Tämä tarkoittaa, että voimme käyttää joitain JavaScript-tekniikoita löytääksemme elementtejä, joilla on nämä attribuutit, ja vaihtaa sitten niiden näkyvyyttä.

Mutta ensinnäkin, miksi meidän pitäisi edes piilottaa niitä?

Selaimen laajennuspeittokuvien piilottaminen

Yleisesti ottaen aina kun nämä peittokuvat ovat esillä, se on tallennettava johonkin kirjanmerkkipalveluun, olipa se sitten Pinterest, Buffer, Pocket tai jokin muu.

Asiaankuuluvat käyttötapaukset

Lisäksi, ainakin siinä tapauksessa, josta puhun, ne renderöidään aina, kun kohdistin kulkee kuvan päällä. Mutta entä jos emme halua sen tapahtuvan.

Esimerkki:

• Ehkä kehittelemme laajennusta, joka laukaisee peittokuvansa, ja haluamme piilottaa muut ponnahdusikkunat.
• Tai ehkä käynnistämme toisen ponnahdusikkunan, joka sisältää kuvia, emmekä halua peittokuvien näkyvän näissä kuvissa.

Joka tapauksessa tässä on yksi tapa piilottaa peittokuvat tarpeidesi mukaan.

Prosessi

Koska WordPress sisältää oletuksena jQueryn, aion käyttää sitä kirjastona. Mutta tätä voidaan yhtä helposti käyttää etsimällä kaikki elementit tietyllä luokan nimellä ja iteroimalla niitä (jos valitset vanilja-JavaScriptin).

Ensin haluamme aloittaa body – elementistä ja sitten tarkastella esimerkiksi kaikkia span – elementtejä (koska ne ovat yleensä suosituimpia elementtejä – jälleen vain minun kokemukseni mukaan – ja valmistautua toistamaan niitä ):

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

Seuraavaksi haluamme tarkistaa, onko data:image/svg+xml tekstin sisäisessä tyylimääritteessä. Ja jos se löytyy, muuta elementin näkyvyyttä :

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

Jos haluat muuttaa elementin näkyvyyttä, sinun on määritettävä toinen lauseke, joka poistaa piilotetun arvon tarvittaessa. Jos haluat tehdä niin, voit helposti lisätä tämän :

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

Lopullinen funktio voi näyttää tältä :

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

Sitten sinun tarvitsee vain soittaa hideExtensions();tarvittaessa.

Sana suorituskyvystä

Koska skannaamme DOM:n elementtien osajoukkoa, tästä voi tulla pieni suorituskykyongelma varsinkin jos yhden tyypin elementtejä on paljon.