Youtube Video in Chrome Erweiterung Inhalt Skript

Question

Ich versuche, Youtube-Videos mit der Iframe-API in eine vorhandene Seite mit Hilfe eines Chrom-Erweiterung Inhalt Skript einfügen. Aber ich kann die onYouTubeIframeAPIReady nicht auslösen.

manifest.json

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

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

In einem Chrom-App konnte ich es mit einem webview machen zu arbeiten, aber dies scheint nicht in Erweiterungen verfügbar sein.

Answer 1

Ich löste das Problem, hier ist die Lösung.

Ich habe alle Varianten der Code-Injection-Methode ausprobiert, aber das Problem war, dass das YouTube-API-Skript eine anonyme Funktion definierte, die das Fenster als Eingabeargument erwartete. Selbst nachdem ich dem Rat gefolgt war, keine externen Skripte zu laden (Chrome Web Store löschte vielleicht Ihre Erweiterung) und eine lokale Datei, die ich mit anderen Mitteln eingebunden hatte, konnte ich nicht das onYouTubeIframeAPIReady vom YouTube-API-Skript auslösen lassen. Erst nachdem ich das Skript in dieselbe Datei eingefügt habe, in der ich onYouTubeIframeAPIReady definiert habe, konnte ich das Video sehen. Um den Code besser zu organisieren, also mit ES6-Importen (via Webpack), habe ich die folgenden Schritte gemacht.

Laden Sie das YouTube-API-Skript (https://www.youtube.com/iframe_api siehe https://developers.google.com/youtube/iframe_api_reference) in eine lokale Datei herunter.

das Skript übernehmen als Modul zu arbeiten, indem die das Skript von

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

zu

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

Dadurch ändert sich die anonyme Funktion Aufruf einer Funktion zu ändern, die in einem ES6 Modul Stil exportiert und Das this Objekt in der anonymen Funktion wird mit dem window ausgetauscht. Ich speicherte es in der Datei als youtube-iframe-api.js

Jetzt konnte ich den YouTube API in einem anderen Modul mit dem folgenden Code

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