Быстрый совет, как скрыть наложения расширений браузера

По моему опыту, большинство оверлеев расширений браузера используют фон с типом data:image/svg+xml. Кроме того, каждое из этих наложений использует встроенные стили (а не внешние таблицы стилей) для отображения своих кнопок (или любых элементов управления, которые они решили отображать).

Это означает, что мы можем использовать некоторые приемы JavaScript для поиска элементов с этими атрибутами, а затем переключать их видимость.

Но, во-первых, зачем нам вообще их прятать?

Скрытие наложений расширений браузера

Вообще говоря, всякий раз, когда эти оверлеи отображаются, они сохраняются в какой-либо службе закладок, будь то Pinterest, Buffer, Pocket или что-то еще.

Соответствующий вариант использования

Кроме того, по крайней мере в том случае, о котором я говорю, они отображаются всякий раз, когда курсор проходит над изображением. Но что, если мы не хотим, чтобы это произошло.

Дело в точке:

• Возможно, мы работаем над плагином, который активирует оверлей, и мы хотим скрыть другие всплывающие окна.
• Или, может быть, мы вызываем другое всплывающее окно, содержащее изображения, и мы не хотим, чтобы на этих изображениях появлялись наложения.

В любом случае, вот один из способов скрыть наложения в зависимости от ваших потребностей.

Процесс

Поскольку WordPress включает jQuery по умолчанию, я буду использовать его в качестве предпочтительной библиотеки. Но это можно так же легко использовать, найдя все элементы по указанному имени класса и перебирая их (если вы решите использовать ванильный JavaScript).

Во-первых, мы хотим начать с  элемента body, а затем посмотреть, скажем, на все  элементы span (поскольку они, как правило, являются наиболее популярными элементами — опять же, по моему опыту — и подготовиться к их повторению ):

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

Далее мы хотим проверить наличие data:image/svg+xml в атрибуте встроенного стиля. И, если он найден, измените видимость элемента :

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

Если вы хотите переключить видимость элемента, вам нужно настроить второе предложение, которое при необходимости удалит скрытое значение. Если вы хотите сделать это, вы можете легко добавить это :

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

Окончательная функция может выглядеть примерно так :

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

Тогда вам просто нужно позвонить, hideExtensions();когда это необходимо.

Слово о производительности

Поскольку мы сканируем подмножество элементов в DOM, это может стать проблемой производительности, особенно если имеется много элементов одного типа.