删除twitch上的HTML元素.tv不起作用

时间:2017-10-30 07:17:49

标签: javascript html google-chrome-extension

我的Chrome扩展程序代码从twitch.tv删除Vod标题有什么问题?

content.js

var text = document.getElementsByTagName('video-preview-card__title video-preview-card__title--twoline overflow-hidden relative mg-t-05 font-size-5');
for (var i = 0, l = text.length; i < l; i++) {
  text[i] = text[i].style.display='none';
}

的manifest.json

{
  "manifest_version": 2,

  "name": "Remove Twitch Vod Title HTML",
  "version": "0.1.0",
  "description": "Removes Twitch Vod Title HTML",

  "content_scripts": [{
    "js": ["content.js"],
    "matches": ["https://go.twitch.tv/*", "https://www.twitch.tv/*"]
  }]

}

1 个答案:

答案 0 :(得分:0)

首先,你的getElementsByTagName调用看起来有误,你应该向它传递一个tagName,参见https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

如果您正在寻找更复杂的选择器,您应该使用querySelectorAll,请参阅https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

此外,没有必要这样做

text[i] = text[i].style.display='none';

应该改为

text[i].style.display='none';

除此之外,您正在寻找的DOM元素可能在DOM加载后异步创建。

脏但简单的解决方案是将代码包装在setInterval中,每隔几秒(或几毫秒)检查一次。 例如,每秒检查一次:

setInterval(function() {
  var text = document.querySelectorAll(...);
  for (var i = 0, l = text.length; i < l; i++) {
    text[i].style.display='none';
  }
}, 1000);

此解决方案还会在页面因任何原因重置其显示状态时再次隐藏元素。

您可能需要考虑使用MutationObserver API来获得更强大且更具性能感的解决方案。