gpt4 book ai didi

javascript - Firefox 扩展 : How to run function on every video change on YouTube

转载 作者:行者123 更新时间:2023-11-29 23:01:57 25 4
gpt4 key购买 nike

我有一个将 js 代码注入(inject) 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.onBeforeRequestwebRequest.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

此方法在现场导航或自动播放时向内容脚本发送消息。

关于javascript - Firefox 扩展 : How to run function on every video change on YouTube,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55427417/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com