chrome网页视频抓取(计算就业绿色通道，我的Chrome扩展程序有一个简单的内容脚本)

　　chrome网页视频抓取(计算就业绿色通道，我的Chrome扩展程序有一个简单的内容脚本)

　　本文介绍Chrome扩展内容脚本——使用JavaScript抓取YouTube视频标题的处理方法，对大家解决问题有一定的参考价值。有需要的朋友，和小编一起学习吧！

　　问题描述

　　计算就业绿色通道，YYDS！

　　我的 Chrome 扩展程序有一个简单的内容脚本，可以捕获 YouTube 视频的标题。我的问题是它只能工作一次。我正在尝试访问 HTML采集 的子节点，它应该只有一个，但会得到未定义的 null。执行以下操作：

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

　　element[0].innerText;

　　没有提供任何有用的信息，但据我了解，如果我使用 getElementsByClassName 应用 innerText 并在第一个元素上应用 [0] 它应该可以工作。 html 可能没有完全加载，这可能是个问题，因为有时我会得到 null，但 HTML采集 总是有我想坐在那里访问的属性。

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

　　还有：

　　element.length

　　返回0.

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

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

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

　　里面是我要抓取的“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"

]

}

　　推荐答案

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

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

　　第一个问题是我的代码执行得太早了，所以 setTimeout() 函数解决了这个问题。下一个问题是我在提到之前不知道的问题。 YouTube 动态加载其页面，因此内容脚本仅在页面刷新后运行，这实际上可能永远不会发生。因此，mutationObserver() 可以解决评论中建议的问题。一个奇怪的事情是，即使字符数据更改了列表和子树的 Mutation 案例，而不是 characterData，我也必须观察孩子。根据我的阅读，旧节点被移除，新节点被插入。

　　第一个问题是我的代码执行得太早，所以 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 Extension Content Script - Capturing YouTube Video Titles with JavaScript 的介绍。希望我们推荐的答案对您有所帮助，也希望您多多支持IT之家！

　　这位29岁的程序员因受教育于3月被无情辞职！