时间戳

首页 > 解决方案 > 使用浏览器的自定义样式表 - 如何隐藏 netflix 上的特定节目？

html - 使用浏览器的自定义样式表 - 如何隐藏 netflix 上的特定节目？

问题描述

我最近了解到我们可以使用自定义样式表来操作 Internet 上的网站元素。

我有一个问题，我最终浪费了很多时间在 netflix 上疯狂地观看节目，然后我后悔这样做了。所以我想隐藏我沉迷的节目——在这个例子中是“箭头”。

我敢肯定，在不久的将来我会迷上另一个，我会用同样的技术把它隐藏起来，直到我克服它。

来自 Netflix 的 Arrow 的 CSS 是：

<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 选择器的任何建议？

标签： htmlcssnetflix

解决方案

听起来您可能正在寻找隐藏包含元素的整个bob-overlay容器aria-label="Arrow"。CSS 不能从子节点中选择父节点，但您可以使用 Javascript 轻松做到这一点。安装一个像Tampermonkey这样的用户脚本管理器，然后搜索匹配的元素a[aria-label="Arrow"]，找到它们的祖先.bob-overlay，然后删除它们（或将它们的显示设置为无）：

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>

如果元素是动态加载的并且在初始页面加载时不存在，您可能必须在 a setTimeoutor （或setInterval轮询， or MutationObserver）之后运行 JS。

整个用户脚本可能看起来像

// ==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();
}

推荐阅读