twitch.tvのHTML要素を削除しても動作しない

Question

twitch.tvからVodのタイトルを削除するChrome拡張機能のこのコードで何が問題になっていますか？

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/*"] 
    }] 

} 

Answer 1

まず、あなたのgetElementsByTagNameのコールが間違って見える、あなたが見る、それに単一tagNameをを渡す必要があります

もっと複雑なセレクタをお探しの場合は、あなたはhttps://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

はまた

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

を行う必要がそれは、それに加えてちょうど

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

にあなたが探しているDOM要素を変更する必要がありますが存在しない参照、querySelectorAllを使用する必要があります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を使用して、より堅牢でパフォーマンスに優れたソリューションを検討することをお勧めします。