Google 크롬 확장 프로그램에서 외부 자바 스크립트가 필요합니다.

"콘텐츠 스크립트"Chrome 확장 프로그램에서 "YouTube iframe API"를 사용하고 싶습니다. 내 확장 프로그램에서 YouTube iframe API를 어떻게 사용해야합니까?Google 크롬 확장 프로그램에서 외부 자바 스크립트가 필요합니다.

Youtube iFrame API의 URL : https://www.youtube.com/iframe_api.

일반적으로 매니페스트 파일의 Google 크롬 확장에 스크립트를 포함하지만 URL의 확장자가 .js가 아니기 때문에 Chrome의 확장 프로그램 페이지에 오류가 발생합니다.

또한이 URL의 스크립트는 <script> 태그를 삽입하려고하는데, 이는 content_script 플러그인이 페이지의 javascript에 액세스 할 수 없기 때문에 작동하지 않습니다.

manifest.json을

{ 
    ... 
    "content_scripts": [ 
     { 
      "matches": ["<all_urls>"], 
      "js": ["main.js"], 
      "all_frames": true 
     } 
    ] 
}

main.js 내가 다른 일을해야 무엇

// Inject the script, but this won't work since content scripts can't access the page's javascript (which is where this script is injected). 
var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/player_api"; 

(document.head || document.documentElement).appendChild(tag); 


// Create our own player 
var player; 

var videoID = 'e7Px2yJA6S4'; 

// When the YouTube API is loaded, it calls this function. 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player('movie_player', { 
    height: '390', 
    width: '640', 
    videoId: videoID, 
    events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
    } 
    }); 
}

? 이 스크립트를 올바르게 포함하려면 어떻게해야합니까?

출처

2016-07-06 Don P

Rob W의 답변은 Insert code into the page context using a content script입니다 (방법 1 참조). & 방법 2를 참조하십시오.

일반적으로 콘텐트 스크립트는 isolated word에서 실행되므로 콘텐트 스크립트 (고립 된 세계에 있음)에서 YouTube 플레이어를 초기화하는 동안 youtube api를 <script> 태그 (웹 페이지 세계에 있음)로 포함하면 일반적으로 콘텐츠 스크립트 및 <script> 태그가 서로 정의한 변수/함수에 액세스 할 수 없기 때문에 실패합니다.

한 가지 해결 방법은 두 코드 모두 <script> 태그를 통해 주입하는 것입니다. 다음 샘플을 참조하십시오.

manifest.json을

{ 
    ... 
    "content_scripts": [ 
     { 
      "matches": ["<all_urls>"], 
      "js": ["inject.js"], 
      "all_frames": true 
     } 
    ], 
    "web_accessible_resources": ["https://www.youtube.com/player_api"] 
}

inject.js

function insertScriptFile(callback) { 
    // Inject the script 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/player_api"; 
    tag.onload = function() { 
     callback(); 
    }; 
    (document.head || document.documentElement).appendChild(tag); 
} 

function insertEmmedCode() { 
    var actualCode = `// 3. This function creates an <iframe> (and YouTube player) 
    // after the API code downloads. 
    var player; 
    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: 'M7lc1UVf-VE', 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
    } 

    // 4. The API will call this function when the video player is ready. 
    function onPlayerReady(event) { 
    event.target.playVideo(); 
    } 

    // 5. The API calls this function when the player's state changes. 
    // The function indicates that when playing a video (state=1), 
    // the player should play for six seconds and then stop. 
    var done = false; 
    function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
     setTimeout(stopVideo, 6000); 
     done = true; 
    } 
    } 
    function stopVideo() { 
    player.stopVideo(); 
    } 
`; 

    var script = document.createElement('script'); 
    script.textContent = actualCode; 
    (document.head || document.documentElement).appendChild(script); 
} 

var div = document.createElement("div"); 
div.id = "player"; 
document.body.appendChild(div); 

insertScriptFile(function() { 
    insertEmmedCode(); 
});

출처

2016-07-06 07:33:17

이 솔루션의 문제는 main.js는 여전히 inject.js로부터 분사 된 API에 대한 액세스 권한이없는 것입니다. –

@DonnyP 업데이트. 기본적으로 실행 환경으로 인해 내용 스크립트와 '

Google 크롬 확장 프로그램에서 외부 자바 스크립트가 필요합니다.

답변

관련 문제