YouTube 페이지 (Chrome 확장)에서 전환 후 실제 HTML 가져 오기

모든 YouTube보기 페이지 (예 : https://www.youtube.com/watch?v=YisbVr69r7U ) 에서 스크립트를 실행해야하는 크롬 확장 프로그램을 작업 중입니다.

이 스크립트에서 동영상의 itag를 가져오고 싶습니다 (yt.config에있는 "url_encoded_fmt_stream_map"속성을 구문 분석하여 모든 YouTube 동영상 페이지에있는 스크립트에서 가져올 수 있음).

문제는 일부 페이지의 (document.body.innerHTML)을 구문 분석하여 해당 속성을 찾을 수 없다는 것입니다.

내 manifest.json은 다음과 같습니다.

{
  "manifest_version": 2,

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

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

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

YouTube에서 페이지 간 전환을 사용한다는 것을 알고 있습니다 (예를 들어 동영상을 시청할 동영상을 클릭하면 페이지 상단에 빨간색 막대가 나타나고 동영상 페이지가 나타남). webNavigation onHistoryStateUpdated 이벤트를 사용하여 페이지에서 스크립트를 실행합니다. 전환이 끝납니다.

background.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보기 페이지로 직접 이동하면 (크롬에서 새 탭을 열고 직접 말하면 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"을 찾을 수 없습니다.

페이지의 전환을 처리하는 방법에 문제가있는 것 같습니다.

내 문제를 해결하기 위해 많은 것을 찾았지만 아무것도 효과가 없었습니다.

콘텐츠 스크립트를 사용해 보았지만 페이지가로드 될 때 페이지에 콘텐츠 스크립트가 삽입되고 전환이 정확할 때가 아닌 것 같습니다.

itag가있는 페이지의 실제 HTML을 얻고 싶습니다!

편집하다:

이것은 no로 중복되지 않는 이

이 manifest.json을 시도했습니다.

{
  "manifest_version": 2,

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

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

script.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(',')));
}

하지만 문제가 해결되지 않았습니다!