我的Chrome扩展程序从 twitch.tv 中删除Vod标题的此代码有什么问题?
内容.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/*"]
}]
}
首先,你的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 来获得更强大和性能感知的解决方案。