javascript - 通过 WebExtension 向所有嵌入式 YouTube 视频添加事件监听器

Question

我想实现一个函数，每当在任何网站上播放任何 HTML5 (YouTube) 视频时都会调用该函数。我尝试使用 API:

document.documentElement.addEventListener("playing", function(){
    alert("Video playing")
});

和 jQuery:

$('video').on('playing', function(){
    alert("Video Playing");
});

但是，两者都不起作用。

Answer 1

我自己找到了解决办法。对于那些有兴趣的人:

内容脚本需要像这样在 list 中初始化:

"content_scripts": [
   {
     "matches": ["<all_urls>],
     "js": ["name_of_javascript.js"]
     "run_at" "document_idle"  // "document_end" also works
     "all_frames":true
    }
 ],
   ...

添加标签“all_frames”很重要:true，以便将内容脚本注入(inject)所有子帧。

Content_Script-代码:

var videos = document.getElementsByTagName("video");
if(videos.length>0) {
   for (var i=0; i<videos.length; i++){
        videos[i].addEventListener("playing", function(e){
          ................
          }
      }
 };

这对我有用。

如果您只想为 Youtube-Videos 添加监听器，只需将 document.getElementsbyTagName 替换为 document.querySelectAll('video[src*="youtube"]')。