は、ユーチューブのページの遷移accures後に実際のHTMLを取得する（Chromeの拡張機能）

Question

私はすべてのユーチューブ視聴ページでそのスクリプトで（すなわち、https://www.youtube.com/watch?v=YisbVr69r7U）

をスクリプトを実行する必要がありますChromeの拡張機能に取り組んでいますI ittagを取得したい（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" 
    ] 
} 

私はあなたが見て、ビデオをクリックした場合ユーチューブ（たとえば、ページ間の遷移を使用して、ページの上部にある赤いバーは、ビデオを表示されていることを知っていますページが表示されます）、私は、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(','))); 

私はクロームで新しいタブをopenning（直接ユーチューブ時計のページに移動し、直接行くとき拡張子はよくありませんつまり、https://www.youtube.com/watch?v=YisbVr69r7U）、そのビデオのitagをコンソールに正しく表示します。

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

：私は（映像をクリックすることで、ビデオのページへのユーチューブインデックスページから例えば）遷移によってユーチューブ視聴ページに来たときに 問題は、この場合には、私は、コンソールでこのエラーを持って、来

私はscript.jsをコンソールに表示させるときに、 "url_encoded_stream_map"を見つけることができません。

ページ内のトランジションをどのように扱うかは問題であるようです。

私は問題を解決するために多くを検索しましたが、何も私のために働いていませんでした。

コンテンツスクリプトを使用しようとしましたが、ロード時にコンテンツスクリプトがページに挿入されているように見えますが、移行時には挿入されません。

私はitagを持っているページの実際のHTMLを取得したい！

EDIT：これは何の重複はありません

thisしようとしたこの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(','))); 
} 

が、問題があります解決されません！

Answer 1

debug your scriptの場合、url_encoded_fmt_stream_mapはサイト内のナビゲーション後に文書のどこにも追加されません。サイトをハックすると、ytplayer.config変数がそのような場合に直接更新されることがわかります。

ページ自体にinject our scriptが必要です。

manifest.jsonをでユーチューブのすべての上で動作するコンテンツスクリプトを宣言します。

"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を使用して、エクステンションのバックグラウンドページスクリプトに直接データを送信します。