youtube video in chrome extension 콘텐츠 스크립트

Question

크롬 확장 콘텐츠 스크립트를 사용하여 iframe API가있는 YouTube 동영상을 기존 페이지에 삽입하려고합니다. 하지만 onYouTubeIframeAPIReady을 트리거 할 수 없습니다.

manifest.json을

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

내용 script.js 나는 그것이 webview 작업을 할 수 있었다 크롬 응용 프로그램에서

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 비디오를 볼 수있었습니다. 그러나 코드를 더 잘 구성하기 위해 Webpack을 통해 ES6 가져 오기와 함께 작동합니다. 다음 단계를 수행했습니다.

YouTube API 스크립트 (https://www.youtube.com/iframe_apihttps://developers.google.com/youtube/iframe_api_reference 참조)를 로컬 파일로 다운로드하십시오.

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

이것은 ES6 모듈 스타일로 수출되는 함수에 익명 함수 호출을 변경하고

(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();