Chrome扩展程序 - 页面更新两次，然后在YouTube上删除 [英] Chrome extension - page update twice then removed on YouTube

问题描述

我想制作一个小插件，将简单的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）{$ 
}）; 
 
 
 
}）; 
  

content.js

  chrome.runtime.onMessage.addListener（
函数（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问题的更多详情，您可以查看这些主题：

• https://bugs.chromium.org/p/chromium/issues/detail?id=165854


• Chrome webNavigation.onComplete无法正常工作？
>

• Chrome扩展chome.tabs.onUpdate运行两次？

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

考虑到您正在检测YouTube视频页面，我建议您使用 chrome.webNavigation.onHistoryStateUpdated

  //处理YouTube视频页面
 chrome.webNavigation.onHistoryStateUpdated.addListener（function（details）{
 if（details.frameId === 0 ）{
 //仅当details.url === currentTab.url 
时才会触发chrome.tabs.get（details.tabId，function（tab）{
 if（tab.url == = details.url）{
 console.log（onHistoryStateUpdated）; 
} 
}）; 
} 
}）; 
  

I want to make a small extension that injects a simple html into a YouTube page right under the video. It works fine if I simple visiting a youtube url. However if I choose a video from youtube offers then my html code is injected twice but removed. I can see that it to appear and then disappear almost immediately.

My code is:

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 will also fire for iframes, and for youtube, there are many iframes will trigger this event, besides that, youtube doesn't reload the page when you go from one video to another. For more details about youtube issue, you could take a look at these threads:

• https://bugs.chromium.org/p/chromium/issues/detail?id=165854
• Chrome webNavigation.onComplete not working?
• chrome extension chome.tabs.onUpdate running twice?

So my recommendation would be using chrome.webNavigation api, and combining webNavigation.onCompleted with webNavigation.onHistoryStateUpdated, sample code would look like the following

Considering you are detecting youtube video page, I would suggest you used 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");
            }
        });
    }
});

这篇关于Chrome扩展程序 - 页面更新两次，然后在YouTube上删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！