youtube video in chrome extensionコンテンツスクリプト

Question

私はyourameの動画をiframe APIと共に既存のページにchrome拡張コンテンツスクリプトの助けを借りて挿入しようとしています。しかし、私はonYouTubeIframeAPIReadyをトリガーすることができません。私はそれがwebviewで動作させることができたが、これはいないようですクロムアプリで

manifest.jsonを

"content_scripts": [ 
     { 
      "matches": ["http://*/*", "https://*/*", "file://*/*", "*://*/*"], 
      "js": ["content-script.js"] 
     } 
    ], 

コンテンツ-script.js

const appEl = document.createElement('div'); 
appEl.id = 'my-app'; 
appEl.innerHTML = `<div id="youtube-iframe"></div>`; 
const bodyEl = document.querySelector('body'); 
bodyEl.insertBefore(appEl, bodyEl.firstChild); 

var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/iframe_api"; 
document.querySelector('body').appendChild(tag); 
window.onYouTubeIframeAPIReady =() => { 
    this.player = new YT.Player('youtube-iframe', { 
     height: '390', 
     width: '640', 
     videoId: 'M7lc1UVf-VE', 
     events: { 
      'onReady': onPlayerReady, 
     } 
    }); 
} 

function onPlayerReady(event) { 
    console.log('player ready'); 
    event.target.playVideo(); 
}; 

拡張機能で利用できるようにする

Answer 1

私はこの問題を解決しました。解決策はここにあります。

私はコードインジェクションの方法のすべてのバリエーションを試してみましたが、問題は、YouTubeのAPIスクリプトが入力引数としてウィンドウを期待無名関数を定義していました。したがって、外部スクリプトを読み込まないようにアドバイスしても（クロムウェブストアで拡張機能が削除される可能性があります）、別の方法でローカルファイルを含めると、onYouTubeIframeAPIReadyをYouTube APIスクリプトによってトリガーすることができませんでした。私がonYouTubeIframeAPIReadyと定義したのと同じファイルにスクリプトを貼り付けた後で、私はビデオを見ることができました。しかし、コードをより良く整理するため、ES6のインポート（Webpack経由）で動作するので、以下の手順を実行しました。

は、ローカルファイルへの（https://www.youtube.com/iframe_apihttps://developers.google.com/youtube/iframe_api_referenceを参照）、YouTubeのAPIスクリプトをダウンロードしてください。

これはES6モジュール形式でエクスポートされた関数への匿名の関数呼び出しを変更

export default function(){var g,k=window;function l(a){a=a.split(".") 
... 
Ub=l("onYouTubePlayerAPIReady");Ub&&Ub();} 

に

(function(){var g,k=this;function l(a){a=a.split("."); 
... 
Ub=l("onYouTubePlayerAPIReady");Ub&&Ub();})(); 

からスクリプトを変更することにより、モジュールとして動作するようにスクリプトを採用し、匿名機能のthisオブジェクトはwindowと交換されます。私は

youtube-iframe-api.jsは、今私は

import youtubeApi from './youtube-iframe-api'; 

function onPlayerReady(event) { 
    event.target.playVideo(); 
}, 

window.onYouTubeIframeAPIReady =() => { 
    this.player = new YT.Player('youtube-iframe', { 
    height: '100', 
    width: '100', 
    videoId: 'M7lc1UVf-VE', 
    events: { 
     'onReady': onPlayerReady, 
    } 
    }); 
} 
youtubeApi();