Chrome扩展程序 - 页面更新两次,然后在YouTube上删除

Question

我想制作一个小扩展程序,将简单的html注入视频下方的YouTube页面.如果我简单地访问youtube网址,它工作正常.但是,如果我从youtube商品中选择一个视频,那么我的html代码会被注入两次但会被删除.我可以看到它出现然后几乎立即消失.

我的代码是:

background.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {

    if ( changeInfo.status == 'complete' && tab.status == 'complete' && tab.url != undefined ) {

        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {method: "reDraw"}, function(response) {
                console.log("Injection ready!");
            });
        });

    }

});

content.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.method == "reDraw") {
            $.get(chrome.extension.getURL('/mytest.html'), function(data) {
                $(data).insertAfter('#placeholder-player');
            });   
        } 
    }
);  

Answer 1

chrome.tabs.onUpdated也会触发iframe,对于youtube,有很多iframe会触发此事件,除此之外,当你从一个视频转到另一个视频时,youtube不会重新加载页面.有关youtube问题的更多详细信息,您可以查看以下线程:

• https://bugs.chromium.org/p/chromium/issues/detail?id=165854
• Chrome webNavigation.onComplete无效？
• chrome扩展chome.tabs.onUpdate运行两次？

所以我的建议是使用chrome.webNavigationapi,并结合webNavigation.onCompleted使用webNavigation.onHistoryStateUpdated,示例代码如下所示

考虑到你正在检测youtube视频页面,我建议你使用 chrome.webNavigation.onHistoryStateUpdated

// To handle youtube video page
chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
    if(details.frameId === 0) {
        // Fires only when details.url === currentTab.url
        chrome.tabs.get(details.tabId, function(tab) {
            if(tab.url === details.url) {
                console.log("onHistoryStateUpdated");
            }
        });
    }
});