Коротка порада щодо приховання накладень розширень веб-переглядача

З мого досвіду більшість накладень розширень браузера використовують фон із типом 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 у атрибуті inline style. І, якщо він знайдений, то змініть видимість елемента :

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, це може стати проблемою продуктивності, особливо якщо є багато елементів одного типу.