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

标签 javascript html google-chrome-extension youtube

我想做一个小的扩展,将一个简单的 html 注入(inject)视频正下方的 YouTube 页面。如果我简单地访问一个 youtube url,它就可以正常工作。但是,如果我从 youtube 提供的视频中选择一个视频,那么我的 html 代码将被注入(inject)两次但被删除。我可以看到它几乎立即出现然后消失。

我的代码是:

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');
            });   
        } 
    }
);  

最佳答案

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

所以我的建议是使用 chrome.webNavigation api,并将 webNavigation.onCompletedwebNavigation.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");
            }
        });
    }
});

关于javascript - Chrome 扩展程序 - 页面更新两次然后在 YouTube 上删除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36808309/

相关文章:

javascript - Couchapp:如何存储文档?

java - jqGrid不显示来自java的Json数据

javascript - 无法从 javascript 命名空间调用 'private' 方法?

javascript - 如何使用javascript捕获多个表单的点击事件

javascript - 在 onclick 函数中传递字符串参数

c++ - 在 Chromium 中构建 Chrome 扩展的标准方法

javascript - Chrome 打包应用程序中的 GUI

javascript - 如何在 Cordova 上设置请求 header 的特定来源?

html - 如果我使用 UTF-8,HTML 上的问号字符和 SQL 数据上的奇怪字符,如果我使用 ISO-8859-1

javascript - 如何选择当前标签右侧的所有标签?