时间戳

首页 > 解决方案 > Chrome 扩展内容脚本 - 使用 JavaScript 抓取 YouTube 视频标题

javascript - Chrome 扩展内容脚本 - 使用 JavaScript 抓取 YouTube 视频标题

问题描述

我的 Chrome 扩展程序有一个简单的内容脚本，它应该可以抓取 YouTube 视频的标题。我的问题是它只工作过一次。我尝试访问 HTMLCollection 的子节点，它应该只有一个，但我得到未定义的空值。做类似的事情：

element[0].innerText;

没有给我任何有用的东西，但根据我的理解，如果我使用 getElementsByClassName 并在第一个元素上使用 [0] 应用 innerText 它应该可以工作。html 没有完全加载可能是一个问题，因为有时我会得到 null，但 HTMLCollection 总是有我想访问的属性，只是坐在那里。

还：

element.length

返回 0。

这就是我通常在我的脚本中得到的。

当它不起作用时。

里面是我想要获取的“innerText”属性。

在此处输入图像描述

这就是我得到的一次它的工作。

{
    "manifest_version": 2,
    "name": "test",
    "author": "Muhammad Amer",
    "description": "test",
    "version": "1.0",

    "content_scripts": [
    {
    "matches": [
      "https://www.youtube.com/*"
    ],

    "js": ["jquery-3.3.1.js", "content.js"]
    }
],

"permissions": [
    "https://www.youtube.com/*",
    "tabs",
    "activeTab", 
    "webNavigation"
    ]

}


    var element = document.getElementsByClassName("title style-scope ytd-video- 
    primary-info-renderer");
console.log(element);

    for (var i = 0; i < element.length; i++) {
    var songTitle = element[i].innerText;
    console.log(songTitle);
    }

标签： javascriptarraysgoogle-chromegoogle-chrome-extensionyoutube

解决方案

在以下帖子的帮助下，我找到了一个解决方案：“MutationObserver”上的“观察”：参数 1 不是“节点”类型

第一个问题是我的代码执行得太早，所以该setTimeout()函数解决了这个问题。下一个问题是在被提及之前我不知道我会遇到的问题。YouTube 会动态加载其页面，因此内容脚本仅在页面刷新时才会运行，而这实际上可能永远不会发生。因此mutationObserver()，按照评论中的建议努力解决该问题。一件奇怪的事情是，即使字符数据发生了变化，我也必须观察子列表和子树的突变而不是 characterData。从我读过的内容中删除旧节点，然后插入新节点。

这是代码：

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
        if (mutation.addedNodes.length) {
            if (mutation.type == 'childList') {
                console.log(mutation.target.innerText);
            }
        }
        })
    })

function checkNode() {
        var targetNode = document.querySelector("h1.title.style-scope.ytd-video-primary-info-renderer");
        if (!targetNode) {
            window.setTimeout(checkNode, 500);
            return;
        }
        console.log(targetNode.innerText);
        var config = {
            childList: true,
            subtree:true
        }
        observer.observe(targetNode, config)
    }
checkNode();

推荐阅读