Question

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

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);
    }

Answer 1

在以下帖子的帮助下，我找到了解决方案：'observe' on 'MutationObserver': parameter 1 is not of type 'Node'

第一个问题是我的代码执行得太早了，因此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();

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

1 个答案: