如何阻止/删除内容脚本中的 Youtube 共享、下载按钮，就像 uBlock 的做法一样？

Question

使用下面的代码删除上述按钮是可行的，但它不会以显示子菜单中其他按钮的方式更新 UI。其他按钮仍然隐藏在子菜单中，而最初显示的按钮（即谢谢，剪辑）只是向右折叠到子菜单按钮。

document.querySelector('button[aria-label="Download"]').remove();
document.querySelector('button[aria-label="Share"]').remove();

我希望在删除“共享”和“下载”按钮后，会显示子菜单中的“保存”等其他按钮。

我尝试通过 uBlock Origin 扩展来阻止它，它确实按照我期望的方式工作。但我正在寻找一种通过我自己的内容脚本来完成的方法。我的理解是这应该是可能的，因为 uBlock 作为浏览器扩展，以某种方式能够做到这一点。

自定义 uBlock 过滤器：

www.youtube.com##.ytd-download-button-renderer.style-scope > yt-button-shape
www.youtube.com###top-level-buttons-computed > ytd-button-renderer.ytd-menu-renderer.style-scope > yt-button-shape > .yt-spec-button-shape-next--icon-leading.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal.yt-spec-button-shape-next > yt-touch-feedback-shape > .yt-spec-touch-feedback-shape--touch-response.yt-spec-touch-feedback-shape > .yt-spec-touch-feedback-shape__fill
www.youtube.com###top-level-buttons-computed > ytd-button-renderer.ytd-menu-renderer.style-scope

它不必完全是 uBlock 的做法。我的主要目标只是始终通过内容脚本显示“保存”按钮。

Answer 1

正如 wOxxOm 所建议的，正确的方法是通过 CSS 隐藏/阻止元素，该元素现在显示“保存”按钮。以下是我自己解压的扩展。

manifest.json

  "content_scripts": [
    {
      "matches": ["https://www.youtube.com/*"],
      "css": ["hide.css"],
      "run_at": "document_end"
    }
  ]

隐藏.css：

button[aria-label="Download"],
button[aria-label="Share"],
button[aria-label="Thanks"],
button[aria-label="Clip"] { display:none !important }

上面的 CSS 隐藏了所有 4 个按钮，如果您只想隐藏特定的按钮，只需删除带有 aria-label 的相应行即可。