Использование таблицы пользовательских стилей для браузера - Как скрыть указанные c шоу на Netflix? - PullRequest
Новая
       57

Использование таблицы пользовательских стилей для браузера - Как скрыть указанные c шоу на Netflix?

0 голосов
/ 17 февраля 2020

Недавно я узнал, что мы можем использовать пользовательские таблицы стилей для манипулирования элементами веб-сайтов на inte rnet.

У меня возникла проблема, когда я заканчиваю тем, что убивал много раз за просмотром шоу на Netflix. а потом я потом жалею об этом. Так что я хотел бы скрыть шоу, к которым я пристрастился - в данном случае «Стрелка».

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

CSS от Netflix для Arrow: 

<a aria-label="Arrow" class="bob-jaw-hitzone" href="/title/70242081"></a>

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

Непосредственный родитель этого селектора CSS, о котором я упоминал выше: 

<div class="bob-overlay bob-overlay-hidden">
<div class="bob-play-hitzone"></div>
<a aria-label="Arrow" class="bob-jaw-hitzone" href="/title/70242081"></a>
<div class="bob-overview-wrapper">
    <div class="bob-overview">
        <a tabindex="0" data-uia="play-button" role="link" aria-label="Resume" class="bob-play-button playLink" href="/watch/80140962?trackId=14170286&amp;tctx=1%2C0%2Cb9a98838-f436-4b89-ac66-7190b45402e6-32766795%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_77601417X3XX1581889779290%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_ROOT">
            <span class="play-button">
                <svg class="svg-icon svg-icon-play-with-ring" focusable="true">
                    <use filter="" xlink:href="#play-with-ring">
                    </use>
                </svg>
            </span>
        </a>
        <div class="bob-title">
            Arrow
        </div>
        <div class="bob-overview-resume-title-wrapper">
        <div class="watched-title watched-title--bob-overview watched-title--no-wrap">
            <span><b>S5:E7</b> "Vigilante"</span>
        </div>
    </div>
    <div class="bob-content-warning-wrapper"></div>
</div>

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

a[aria-label="Arrow"] { display: none; }

какой-нибудь совет о том, как написать css селектор, который будет соответствовать и скрывать это шоу?

1 Ответ

1 голос
/ 17 февраля 2020

Звучит так, как будто вы пытаетесь скрыть целый bob-overlay контейнер , который содержит элемент с aria-label="Arrow". CSS не может выбрать родителя от ребенка, но вы можете сделать это довольно легко с помощью Javascript. Установите менеджер пользовательских скриптов, например Tampermonkey , затем найдите элементы, соответствующие a[aria-label="Arrow"], найдите их предков .bob-overlay s и удалите их (или установите для них отображение): 

for (const a of document.querySelectorAll('a[aria-label="Arrow"]')) {
  a.closest('.bob-overlay').remove();
}
<div class="bob-overlay bob-overlay-hidden">
  arrow - hide me
  <div class="bob-play-hitzone"></div>
  <a aria-label="Arrow" class="bob-jaw-hitzone" href="/title/70242081"></a>
  <div class="bob-overview-wrapper">
    <div class="bob-overview">
      <a tabindex="0" data-uia="play-button" role="link" aria-label="Resume" class="bob-play-button playLink" href="/watch/80140962?trackId=14170286&amp;tctx=1%2C0%2Cb9a98838-f436-4b89-ac66-7190b45402e6-32766795%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_77601417X3XX1581889779290%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_ROOT">
        <span class="play-button">
                <svg class="svg-icon svg-icon-play-with-ring" focusable="true">
                    <use filter="" xlink:href="#play-with-ring">
                    </use>
                </svg>
            </span>
      </a>
      <div class="bob-title">
        Arrow
      </div>
      <div class="bob-overview-resume-title-wrapper">
        <div class="watched-title watched-title--bob-overview watched-title--no-wrap">
          <span><b>S5:E7</b> "Vigilante"</span>
        </div>
      </div>
      <div class="bob-content-warning-wrapper"></div>
    </div>
  </div>
</div>

<div class="bob-overlay bob-overlay-hidden">
  not arrow, don't hide me
  <div class="bob-play-hitzone"></div>
  <a aria-label="Foobar" class="bob-jaw-hitzone" href="/title/70242081"></a>
  <div class="bob-overview-wrapper">
    <div class="bob-overview">
      <a tabindex="0" data-uia="play-button" role="link" aria-label="Resume" class="bob-play-button playLink" href="/watch/80140962?trackId=14170286&amp;tctx=1%2C0%2Cb9a98838-f436-4b89-ac66-7190b45402e6-32766795%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_77601417X3XX1581889779290%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_ROOT">
        <span class="play-button">
                <svg class="svg-icon svg-icon-play-with-ring" focusable="true">
                    <use filter="" xlink:href="#play-with-ring">
                    </use>
                </svg>
            </span>
      </a>
      <div class="bob-title">
        something else
      </div>
      <div class="bob-overview-resume-title-wrapper">
        <div class="watched-title watched-title--bob-overview watched-title--no-wrap">
          <span><b>S5:E7</b> "Vigilante"</span>
        </div>
      </div>
      <div class="bob-content-warning-wrapper"></div>
    </div>
  </div>
</div>

Если элементы загружаются динамически и отсутствуют при начальной загрузке страницы, вам может потребоваться запустить JS после setTimeout или (или setInterval опрос или MutationObserver).

Весь пользовательский скрипт, вероятно, будет выглядеть примерно так: 

// ==UserScript==
// @name             Hide Arrow
// @include          https://www.netflix.com/*
// @grant            none
// ==/UserScript==

for (const a of document.querySelectorAll('a[aria-label="Arrow"]')) {
  a.closest('.bob-overlay').remove();
}
...