(浏览器扩展)在页面完全加载之前触发EventListener加载

时间:2019-01-20 20:27:56

标签: javascript event-listener

因此,我正在尝试制作一个Chrome扩展程序,以更改youtube的各个部分。问题在于所有信息(评论,顶,描述等)通常会在实际视频之后加载。在页面完全加载之前(在视频下方的信息加载之前)window.addEventListener('load'....会触发。)

我尝试通过添加以下内容来解决此问题:

function myFunc() {
    try {
        var teste = document.getElementById('info-text').nextSibling.nextSibling.children[0].children[0];
        setTimeout(function(){ Youtube(); }, 1000);
    } catch(err) {
        setTimeout(function(){ myFunc(); }, 400);
    }
}

因此,如果该元素尚不存在,则会循环。然后的问题是,youtube将元素加载到其中,但仍需要一段时间来获取和调整其值。然后问题是扩展名更改了2个元素的文本,并且扩展名已替换的信息随后被获取,因此它在新文本的末尾添加了扩展名试图替换的信息。 (此外,在执行“ Youtube”功能之前,我曾尝试将超时设置为5秒,但是当我没有打开控制台时,它似乎忽略了这些超时。)

这是我的完整代码:

var fetch_slash; var i; var votes; var f; var dislikes; var ElementDislikes; var matchingItemsRE;
var likes; var ElementLikes; var slash_placement; var res; var matchingItemsYT; var loaded;

if (location.href.includes("youtube.com/watch")) {  
window.addEventListener('load', function(event) { myFunc(); })
}

function myFunc() {
try {
    var teste = document.getElementById('info-text').nextSibling.nextSibling.children[0].children[0];
    setTimeout(function(){ Youtube(); }, 1000);
} catch(err) {
    setTimeout(function(){ myFunc(); }, 400);
}
}

function Youtube() {
loaded = false;
matchingItemsYT = [];
var allElements = document.getElementsByClassName("style-scope ytd-toggle-button-renderer style-text");
for(i=0; i < allElements.length; i++){
    matchingItemsYT.push(allElements[i]);
    if (matchingItemsYT[i].getAttribute("aria-label")){
        if ( matchingItemsYT[i].getAttribute("aria-label").includes(" likes") ) {
            ElementLikes = matchingItemsYT[i];
            if ( ElementLikes.textContent != "" ){ loaded = true; }
        }
        else if ( matchingItemsYT[i].getAttribute("aria-label").includes(" dislikes") ) {
            ElementDislikes = matchingItemsYT[i];
        }
    }
}
EditYoutube();
}

function EditYoutube(){
votes = ElementLikes.getAttribute("aria-label");
votes = votes.replace(" likes", "");
votes = votes.replace(/,/g, "");
EditYoutubeString(true);
likes = votes;
votes = ElementDislikes.getAttribute("aria-label");
votes = votes.replace(" dislikes", "");
votes = votes.replace(/,/g, "");
EditYoutubeString(false);
dislikes = votes;
ElementLikes.textContent = likes;
ElementDislikes.textContent = dislikes;
if( loaded == false ){ Youtube(); }
}

function EditYoutubeString(pro){
var groups;
if (votes.length < 4){ groups = 0 }
else if (votes.length < 7){ groups = 3 }
else if (votes.length < 10){ groups = 7 }
else if (votes.length < 13){ groups = 11 }
else { return; }    
if (pro == true) { ElementLikes.textContent = " "; }
    else if (pro == false) { ElementDislikes.textContent = " "; }
    if (groups > 0){ EditYoutubeStringSub(3) }
    if (groups > 3){ EditYoutubeStringSub(7) }
    if (groups > 7){ EditYoutubeStringSub(11) }
}
function EditYoutubeStringSub(groupNumb){
    var komma = ",";
    var slice;
    var punkt;
    punkt = votes.length - groupNumb;
    slice = votes.slice(punkt);
    votes = votes.substring(0, punkt);
    votes = votes.concat(komma);
    votes = votes.concat(slice);
}

如您所见,我尝试通过设置来解决此问题,并在代码末尾检查是否'loaded == false',但这似乎不起作用。不太确定为什么。这里的想法用光了。 (另外,请给我有关如何改进代码的指导。由于我是编程新手,所以

0 个答案:

没有答案