我想做一个小的扩展,将一个简单的 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 问题的更多详细信息,您可以查看这些线程:
- https://bugs.chromium.org/p/chromium/issues/detail?id=165854
- Chrome webNavigation.onComplete not working?
- chrome extension chome.tabs.onUpdate running twice?
所以我的建议是使用 chrome.webNavigation
api,并将 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");
}
});
}
});
关于javascript - Chrome 扩展程序 - 页面更新两次然后在 YouTube 上删除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36808309/