javascript - Aria 选择器在 FB 上找不到元素

Question

我从来没有做过 chrome 扩展，只编写了一点 js，我想在页面加载时从 facebook 中删除“watch”标签。（我真正想做的是删除红色徽章，告诉你有新的毫无意义的视频你没有要求；下面是我试图做到这一点）

<a aria-label="Watch" class="oajrlxb2 <-- Omitted jumbled classes --> g5ia77u1" href="/watch/" role="link" tabindex="0" aria-current="page"><span class="l9j0dhe7"><!--$--><svg viewBox="0 0 28 28" class="a8c37x1j ms05siws hwsy1cff b7h9ocf4 aaxa7vy3" height="28" width="28"></svg><span class="pmk7jnqg h5g66v2i nezaghv5"><!--$--><!--/$--></span><!--/$--></span></a>

从 chrome 中的检查中，我得到了上面的元素和图，这是我想要隐藏的元素。我根据一些指南设置了扩展并且它正在运行，我尝试了以下脚本的几种变体来隐藏选项卡：

$(document).ready(function () {
    $("[aria-label='Watch']").style.visibility = "hidden"
    $("[aria-label='Watch']").style.display = "block"
    $("[aria-label='Watch']").style.display = "none"
})

我得到的错误：

Uncaught TypeError: Cannot set property 'visibility' of undefined

所以我从这个问题和类似问题中得到的选择器不起作用。我怀疑我的选择器问题与“aria”属性无关，因为我也尝试在一些 fb-jumbled 类上进行选择，这确实导致了同样的错误

编辑，这是尝试废弃 js 并仅在 css 中执行后的当前清单文件：

{
  "name": "Hide unwanted tab",
  "version": "1.0",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": [
        "https://www.facebook.com/*"
      ],
      "css": ["hide_watch.css"]
    }
  ]
}

和css文件：

[ariaLabel="Watch"]
{
    visibility: hidden;
    display: none;
}

标签： javascriptjquerygoogle-chrome-extension