Firefox扩展：如何在YouTube上的每个视频更改上运行功能

Question

我有一个扩展程序，可以将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。

Answer 1

使用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或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。

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

Answer 2

好主意是找到一种方法来定期检查URL的更改，因此我使用的技巧是利用用户需要单击播放/暂停按钮之类的东西，当然还要单击其他要观看的视频。< / p>

因此在您的页面内 onload 事件...（是您的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){}

 }

这不是最好的解决方案，但它确实有效。