Ein schneller Tipp zum Ausblenden von Browsererweiterungs-Overlays

Meiner Erfahrung nach verwenden die meisten Overlays von Browsererweiterungen einen Hintergrund vom Typ data:image/svg+xml. Darüber hinaus verwendet jedes dieser Overlays Inline-Stile (statt externer Stylesheets), um seine Schaltflächen (oder welche Steuerelemente auch immer sie rendern möchten) zu rendern.

Das bedeutet, dass wir einige JavaScript-Techniken verwenden können, um Elemente mit diesen Attributen zu finden und dann ihre Sichtbarkeit umzuschalten.

Aber erstens, warum sollten wir sie überhaupt verstecken?

Ausblenden von Browsererweiterungs-Overlays

Im Allgemeinen werden diese Overlays immer dann angezeigt, wenn sie in einem Lesezeichendienst gespeichert werden, sei es Pinterest, Buffer, Pocket oder etwas anderes.

Relevante(r) Anwendungsfall(e)

Außerdem werden sie, zumindest in dem Fall, von dem ich spreche, immer dann gerendert, wenn der Cursor über ein Bild fährt. Aber was ist, wenn wir das nicht wollen.

Fallbeispiel:

• Vielleicht arbeiten wir an einem Plugin, das seine Überlagerung auslöst, und wir möchten andere Popups ausblenden.
• Oder vielleicht lösen wir ein weiteres Popup aus, das Bilder enthält, und wir möchten nicht, dass die Overlays auf diesen Bildern erscheinen.

Was auch immer der Fall ist, hier ist eine Möglichkeit, die Overlays je nach Bedarf auszublenden.

Der Prozess

Da WordPress standardmäßig jQuery enthält, werde ich es als Bibliothek der Wahl verwenden. Dies könnte jedoch genauso einfach verwendet werden, indem alle Elemente nach einem bestimmten Klassennamen gesucht und durch sie iteriert werden (wenn Sie sich für die Verwendung von Vanilla-JavaScript entscheiden).

Zuerst wollen wir mit dem body -Element beginnen und uns dann, sagen wir, alle span- Elemente ansehen (da diese tendenziell die beliebtesten Elemente sind – wiederum nur nach meiner Erfahrung – und uns darauf vorbereiten, sie zu durchlaufen ):

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

Als Nächstes wollen wir prüfen, ob data:image/svg+xml im Inline-Stilattribut vorhanden ist. Und wenn es gefunden wird, ändern Sie die Sichtbarkeit des Elements :

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

Wenn Sie die Sichtbarkeit des Elements umschalten möchten, müssen Sie eine zweite Klausel einrichten, die den verborgenen Wert bei Bedarf entfernt. Wenn Sie das tun möchten, können Sie dies einfach hinzufügen :

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

Die endgültige Funktion könnte etwa so aussehen :

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

Dann brauchen Sie bei Bedarf nur noch anzurufen hideExtensions();.

Ein Wort zur Leistung

Da wir eine Teilmenge von Elementen im DOM scannen, kann dies zu einem Leistungsproblem werden, insbesondere wenn viele Elemente eines einzelnen Typs vorhanden sind.