Question

我正在开发一个Chrome扩展程序，它与Twitter交互以根据用户首选项重新设置页面的某些元素。我可以在页面上重新设置许多元素，但由于某种原因，扩展程序无法查看或使用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类的样式添加了一个filter属性。永远不会应用此注入属性。当我通过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%);
}

上面的样式会被正确注入和应用。

我尝试通过Chrome Dev Tools手动添加样式属性，但它确实有效。

我已经使用Chrome开发工具复制选择器并放入我的CSS文件但它没有得到应用。 See a screenshot here和output here。

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

Answer 1

我弄清楚问题是什么。引用的推文和转推被加载到Twitter主页上的iframe中。我以前无法操纵的所有元素都被加载到众多的iframe中。一旦我将＆＃34; all_frames＆＃34;：true 属性添加到我的manifest.json，我就开始获得预期的输出。

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

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

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

1 个答案: