我有一个扩展,将js
代码注入YouTube页面。我在manifest.json
中使用了以下声明:
"content_scripts": [
{
"matches": [
"*://*.youtube.com/*"
],
"js": [
"background.js"
]
}
]
我想定义一个功能,当我移动到另一个视频时,它会打印视频名称,喜欢和不喜欢的数量。
我在background.js
写了这个:
window.onhashchange = function () {
console.log(
document.querySelector("h1.title > yt-formatted-string:nth-child(1)").innerHTML, "\n",
document.querySelector("ytd-toggle-button-renderer.ytd-menu-renderer:nth-child(1) > a:nth-child(1) > yt-formatted-string:nth-child(2)").getAttribute("aria-label"), "\n",
document.querySelector("ytd-toggle-button-renderer.style-scope:nth-child(2) > a:nth-child(1) > yt-formatted-string:nth-child(2)").getAttribute("aria-label"), "\n",
)
}
但它只运行一次。如果我从“推荐”中选择新视频则不起作用。我也试过.onload
,.onunload
等。
UPD:现在我找到的唯一方法是使用.setInterval
。
使用WebExtensions API的几种可能的解决方案都需要一个后台脚本,它将向您的内容脚本发送消息。修改你的manifest.json
包括:
"background": {
"scripts": ["background.js"]
}
我在这里命名为background script background.js
,它会与你现在拥有的东西相撞 - 你可能想考虑将你的content script重命名为contentscript.js
,所以你不要让两者混淆。
在contentscript.js
中,您有消息监听器
browser.runtime.onMessage.addListener(message => {
if (message.videoChanged) {
// do stuff
}
});
tabs.onUpdated
需要获得manifest.json
的许可
"permissions": [
"tabs"
]
在background.js
browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (!changeInfo.url) {
// url didn't change
return;
}
const url = new URL(changeInfo.url);
if (!url.href.startsWith('https://www.youtube.com/watch?') ||
!url.searchParams.get('v')) {
// not a youtube video
return;
}
browser.tabs.sendMessage(tabId, {videoChanged: true});
});
此方法将在首次访问时向内容脚本发送消息,同时进行现场导航或自动播放。
webNavigation.onHistoryStateUpdated
需要获得manifest.json
的许可
"permissions": [
"webNavigation"
]
在background.js
browser.webNavigation.onHistoryStateUpdated.addListener(history => {
const url = new URL(history.url);
if (!url.searchParams.get('v')) {
// not a video
return;
}
browser.tabs.sendMessage(history.tabId, {videoChanged: true});
},
{url: [{urlMatches: '^https://www.youtube.com/watch\?'}]}
);
此方法在现场导航或自动播放时向内容脚本发送消息。
webRequest.onBeforeRequest
or webRequest.onCompleted
当视频发生变化时,YouTube会发出xmlhttrequest。您可以通过打开开发人员工具(Ctrl + Shift + I),选择网络选项卡,选择XHR
,按watch?
过滤,然后让YT切换到下一个视频来查看请求。您将看到下一个视频发出两个请求,一个在视频更改前不久在URL中有prefetch
参数,另一个在视频实际更改时没有prefetch
参数。
manifest.json
需要的权限
"permissions": [
"https://www.youtube.com/watch?*",
"webRequest"
]
在background.js
browser.webRequest.onBeforeRequest.addListener(request => {
const url = new URL(request.url);
if (!url.searchParams.get('v') || url.searchParams.get('prefetch')) {
// not a video or it's prefetch
return;
}
browser.tabs.sendMessage(request.tabId, {videoChanged: true});
},
{urls: ['https://www.youtube.com/watch?*'], types: ['xmlhttprequest']}
);
onBeforeRequest
可能有点太快,并在新视频实际加载完毕之前将消息发送到内容脚本。在这种情况下,你可以用onCompleted
替换它。
此方法在现场导航或自动播放时向内容脚本发送消息。
好吧,我的想法是找到一种定期检查URL更改的方法,因此我使用的技巧是利用用户点击播放/暂停按钮等内容以及其他视频观看的需要。
所以在你的页面onload事件...(W是你的iframe ID)
if(W.contentWindow.document.URL.indexOf('www.youtube.com/watch?v=')>-1){ // You may want to add some more permissable URL types here
W.contentWindow.document.body.addEventListener('click',function(e){ CheckForURLChange(W.contentWindow.document.title,W.contentWindow.document.location); },false);
}
进一步完成其余功能......
function CheckForURLChange(Title,URL){
// Your logic to test for URL change and take any required steps
if(StoredURL!==URL){}
}
这不是最好的解决方案,但确实有效。