javascript - 在 YouTube 页面中发生转换后获取实际的 HTML(chrome 扩展)

Question

我正在开发一个 Chrome 扩展程序，它应该在每个 YouTube 观看页面中运行一个脚本(即 https://www.youtube.com/watch?v=YisbVr69r7U )

在该脚本中，我想获取视频的 itag(我可以通过解析 yt.config 中的“url_encoded_fmt_stream_map”属性，从每个 YouTube 视频页面中的脚本中获取它)

问题是我无法通过解析某些页面的 (document.body.innerHTML) 找到该属性。

这是我的 list .json:

{
  "manifest_version": 2,

  "name"            : "Test Extension",
  "version"         : "0.0",

  "background": {
    "scripts": ["background.js"]
  },

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

我知道 youtube 使用页面之间的转换(例如，如果您单击要观看的视频，则页面顶部会出现一个红色条，然后会出现视频页面)，我使用 webNavigation onHistoryStateUpdated 事件来执行脚本转换结束后的页面。

背景.js:

const r = /https:\/\/www\.youtube\.com\/watch\?v=(.*?)(&.*)?/;
chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
    if(r.test(details.url))
        chrome.tabs.executeScript(details.tabId,{file:"script.js"});
});

和 script.js:

function getURLMap(bodyHTML) {
    var r = /"url_encoded_fmt_stream_map":"(.*?)"/;
    var matches = bodyHTML.match(r);
    return matches[1];
}

function getTags(fmts_info) {
    var tags = [];
    r = /itag=(.*?)\\u/;
    console.log(fmts_info[0]);
    for(var i = 0; i < fmts_info.length; i++) {
        matches = fmts_info[i].match(r);
        tags[i] = matches[1];
    }
    return tags;
}

console.log(getTags(getURLMap(document.body.innerHTML).split(',')));

当我直接进入 YouTube 观看页面(在 chrome 上打开一个新选项卡并直接输入: https://www.youtube.com/watch?v=YisbVr69r7U )时，该扩展效果很好，它在控制台中正确显示了该视频的 itag。当我通过转换进入 YouTube 观看页面时(例如通过单击视频从 YouTube 索引页面到视频页面)，问题就出现了，在这种情况下，我在控制台中出现以下错误:

Uncaught TypeError: Cannot read property '1' of null  script.js:4

当我让我的 script.js 在控制台中显示(document.body)时，我在那里找不到“url_encoded_stream_map”

问题似乎出在我如何处理页面中的转换。

我进行了很多搜索来解决我的问题，但没有任何效果。

我尝试使用内容脚本，但似乎内容脚本是在页面加载时插入的，而不是在转换发生时插入的。

我想获取页面的实际 HTML，其中包含 itag!

编辑:

这不会重复到 this

尝试过这个manifest.json:

{
  "manifest_version": 2,

  "name"            : "Test Extension",
  "version"         : "0.0",

  "content_scripts": [{
      "matches": [ "*://*.youtube.com/*" ],
      "js": [ "script.js" ],
      "run_at": "document_start"
  }]
}

脚本.js:

document.addEventListener("spfdone", process);
document.addEventListener("DOMContentLoaded", process);

function getURLMap(bodyHTML) {
    var r = /"url_encoded_fmt_stream_map":"(.*?)"/;
    var matches = bodyHTML.match(r);
    return matches[1];
}

function getTags(fmts_info) {
    var tags = [];
    r = /itag=(.*?)\\u/;
    for(var i = 0; i < fmts_info.length; i++) {
        matches = fmts_info[i].match(r);
        tags[i] = matches[1];
    }
    return tags;
}

function process() {
    if (location.pathname != "/watch") {
        return;
    }
    console.log(getTags(getURLMap(document.body.innerHTML).split(',')));
}

但是问题并没有解决!

Answer 1

如果您debug your script您将看到，在站点内导航后，url_encoded_fmt_stream_map 未添加到文档中的任何位置。攻击网站 JS 表明，在这种情况下，ytplayer.config 变量会直接更新。

我们必须inject our script进入页面本身。

在manifest.json中声明一个在所有youtube上运行的内容脚本:

"content_scripts": [{
  "matches": [ "*://*.youtube.com/*" ],
  "js": [ "content.js" ],
  "run_at": "document_start"
}]

content.js:

function injectedCode() {
    document.addEventListener("spfdone", process);
    document.addEventListener("DOMContentLoaded", process);

    function process() {
        function getTags(fmts_info) {
            var tags = [];
            r = /itag=(\d+)/;
            for(var i = 0; i < fmts_info.length; i++) {
                var matches = fmts_info[i].match(r);
                if (matches)
                    tags.push(matches[1]);
            }
            return tags;
        }
        if (location.href.indexOf('watch?') < 0) {
            return;
        }
        var tags = getTags(ytplayer.config.args.url_encoded_fmt_stream_map.split(','));
        console.log(tags);
    }
}

function getFunctionText(f) {
    return f.toString().match(/\{[\s\S]*\}$/)[0];
}

document.documentElement.appendChild(document.createElement("script")).text =
    getFunctionText(injectedCode)

要将结果传递回内容脚本，请使用 custom events ，或externally_connectable将数据直接发送到扩展程序的后台页面脚本。