css - 如何从 Chrome 扩展程序中设置某些 Twitter 页面元素的样式？

Question

我正在开发一个与 Twitter 交互的 Chrome 扩展程序，以根据用户偏好重新设计页面的某些元素。我能够重新设置页面上许多元素的样式，但由于某种原因，扩展程序无法查看或使用 DOM 中的某些元素。

以下是用户登录后看到的 Twitter 主页的 HTML 摘录。

<div class="tcu-imageWrapper" style="opacity: 1; background-image: url(&quot;https://pbs.twimg.com/card_img/960062309782585344/fGOYg2aA?format=jpg&amp;name=600x314&quot;); background-size: cover;" data-style="background-image: url(https://pbs.twimg.com/card_img/960062309782585344/fGOYg2aA?format=jpg&amp;name=600x314); background-size: cover;">
    <img class="u-block" data-src="https://pbs.twimg.com/card_img/960062309782585344/fGOYg2aA?format=jpg&amp;name=600x314" alt="" src="https://pbs.twimg.com/card_img/960062309782585344/fGOYg2aA?format=jpg&amp;name=600x314">
</div>

我的扩展中包含一个 CSS 文件 (overlay.css)，它为 tc-ImageWrapper 类的样式添加了一个过滤器属性。这个注入(inject)的属性永远不会被应用。当我通过 Chrome 开发者工具检查时，我没有看到它应用。我已经尝试将它应用于 img 以及包含图像的 tcu-imageWrapper div。两者都不起作用。

manifest.json(摘录)

  "content_scripts": [
    {
      "matches": ["https://twitter.com/*"],
      "css": ["css/overlay.css"],
      "js": ["js/ready.js", "js/actions.js"]
    }
  ],

overlay.css(节选)

.tcu-imageWrapper > img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

相比之下，我能够看到并操作下面的元素(以及我尝试的几乎所有其他元素)。

来自 Twitter 页面的 HTML 的另一部分:

<div class="AdaptiveMedia-photoContainer js-adaptive-photo " data-image-url="https://pbs.twimg.com/media/DWDTA-EWkAEBQjk.jpg" data-element-context="platform_photo_card" style="background-color:rgba(53,64,63,1.0);" data-dominant-color="[53,64,63]">
  <img data-aria-label-part="" src="https://pbs.twimg.com/media/DWDTA-EWkAEBQjk.jpg" alt="" style="width: 100%; top: -86px;">
</div>

overlay.css(另一个摘录)

div.AdaptiveMedia-photoContainer > img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

上面的样式被正确注入(inject)和应用。

我已经尝试通过 Chrome 开发工具手动添加样式属性并且它有效。

我已经使用 Chrome 开发工具复制了选择器并将其放入我的 CSS 文件中，但它没有被应用。 See a screenshot here , 和 output here .

对于我如何设计这些 tcu-imageWrapper 图像的任何想法或见解，我们将不胜感激。

Answer 1

我想出了问题所在。引用的推文和转推被加载到 Twitter 主页上的 iframe 中。我以前无法操作的所有元素都被加载到大量的 iframe 中。将 "all_frames": true 属性添加到我的 manifest.json 后，我开始获得预期的输出。

"content_scripts": [
  {
    "matches": ["https://twitter.com/*"],
    "css": ["css/overlay.css"],
    "js": ["js/ready.js", "js/actions.js"],
    "all_frames": true
  }
]

感谢那些试图提供帮助的人。