Szybka wskazówka dotycząca ukrywania nakładek rozszerzeń przeglądarki

Z mojego doświadczenia wynika, że ​​większość nakładek rozszerzeń przeglądarki używa tła o typie data:image/svg+xml. Co więcej, każda z tych nakładek używa wbudowanych stylów (zamiast zewnętrznych arkuszy stylów) do renderowania swoich przycisków (lub dowolnych kontrolek, które chcą renderować).

Oznacza to, że możemy użyć niektórych technik JavaScript, aby znaleźć elementy, które mają te atrybuty, a następnie przełączyć ich widoczność.

Ale po pierwsze, dlaczego mielibyśmy się w ogóle starać je ukryć?

Ukrywanie nakładek rozszerzeń przeglądarki

Ogólnie rzecz biorąc, za każdym razem, gdy te nakładki są wyświetlane, należy je zapisać w jakiejś usłudze zakładek, czy to Pinterest, Buffer, Pocket, czy coś innego.

Odpowiednie przypadki użycia

Co więcej, przynajmniej w przypadku, o którym mówię, renderują się za każdym razem, gdy kursor przesuwa się nad obrazem. Ale co, jeśli nie chcemy, żeby tak się stało.

Przykładem:

• Być może pracujemy nad wtyczką, która uruchomi swoją nakładkę i chcemy ukryć inne wyskakujące okienka.
• A może uruchamiamy kolejne wyskakujące okienko zawierające obrazy i nie chcemy, aby na tych obrazach pojawiały się nakładki.

Niezależnie od przypadku, oto jeden sposób na ukrycie nakładek w zależności od potrzeb.

Proces

Ponieważ WordPress domyślnie zawiera jQuery, będę używał go jako biblioteki z wyboru. Ale równie łatwo można to wykorzystać, znajdując wszystkie elementy według określonej nazwy klasy i iterując przez nie (jeśli zdecydujesz się na użycie waniliowego JavaScript).

Najpierw chcemy zacząć od  elementu ciała, a następnie przyjrzeć się, powiedzmy, wszystkim  elementom span (ponieważ są to najpopularniejsze elementy – znowu, tylko z mojego doświadczenia – i przygotuj się do ich iteracji ):

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

Następnie chcemy sprawdzić obecność data:image/svg+xml w atrybucie stylu inline. A jeśli zostanie znaleziony, zmień widoczność elementu :

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

Jeśli chcesz przełączyć widoczność elementu, musisz ustawić drugą klauzulę, która w razie potrzeby usunie ukrytą wartość. Jeśli chcesz to zrobić, możesz łatwo dodać to :

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

Ostateczna funkcja może wyglądać mniej więcej tak :

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

Wtedy wystarczy zadzwonić hideExtensions();w razie potrzeby.

Słowo o wydajności

Ponieważ skanujemy podzbiór elementów w DOM, może to spowodować pewien problem z wydajnością, zwłaszcza jeśli istnieje wiele elementów jednego typu.