Kiire näpunäide brauseri laienduse ülekatete peitmiseks

Viimati uuendatud nov. 9, 2022

Sisu

Minu kogemuse kohaselt kasutab enamik brauseri laiendite ülekatteid tausta andmete tüübiga:image/svg+xml. Lisaks kasutavad kõik need ülekatted oma nuppude (või mis tahes juhtelementide renderdamiseks) renderdamiseks sisemisi stiile (mitte väliseid laaditabeleid).

See tähendab, et saame kasutada mõningaid JavaScripti tehnikaid, et leida nende atribuutidega elemente ja seejärel muuta nende nähtavust.

Aga kõigepealt, miks me peaksime neid isegi varjama?

Brauseri laienduse ülekatete peitmine

Üldiselt, kui need ülekatted kuvatakse, tuleb see salvestada mõnda järjehoidjateenusesse, olgu see siis Pinterest, puhver, tasku või midagi muud.

Asjakohased kasutusjuhtumid

Veelgi enam, vähemalt sel juhul, millest ma räägin, renderdatakse need alati, kui kursor liigub üle pildi. Aga mis siis, kui me ei taha, et see juhtuks.

Juhtum:

Võib-olla töötame pistikprogrammi kallal, mis käivitab selle ülekatte, ja tahame peita muud hüpikaknad.
Või käivitame teise hüpikakna, mis sisaldab pilte, ja me ei taha, et nendel piltidel ilmuksid ülekatted.

Igal juhul on siin üks võimalus kattekihtide peitmiseks vastavalt teie vajadustele.

Protsess

Kuna WordPress sisaldab vaikimisi jQueryt, kasutan seda valitud raamatukoguna. Kuid seda saab sama lihtsalt kasutada, leides kõik elemendid kindlaksmääratud klassinime järgi ja korrates neid läbi (kui otsustate kasutada vanilje JavaScripti).

Esiteks tahame alustada kehaelemendist ja seejärel vaadata näiteks kõiki ulatuvaid elemente (kuna need on tavaliselt kõige populaarsemad elemendid – jällegi, minu kogemuse põhjal – ja valmistuda nende läbimiseks ):

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

Järgmisena tahame kontrollida atribuudi data:image/svg+xml olemasolu tekstisiseses stiiliatribuudis. Ja kui see leitakse, muutke elemendi nähtavust :

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

Kui soovite elemendi nähtavust sisse lülitada, peate seadistama teise klausli, mis vajadusel peidetud väärtuse eemaldab. Kui soovite seda teha, saate hõlpsalt lisada selle :

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

Lõplik funktsioon võib välja näha umbes selline :

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

Siis tuleb lihtsalt vajadusel helistada hideExtensions();.

Sõna esituse kohta

Kuna me skannime DOM-is elementide alamhulka, võib see muutuda jõudlusprobleemiks, eriti kui ühte tüüpi elemente on palju.

: tommcfarlin.com