chrome扩展内容脚本中的youtube视频 [英] youtube video in chrome extension content script

问题描述

我试图借助chrome扩展程序内容脚本将具有iframe API的youtube视频插入到现有页面中.但是我无法触发 onYouTubeIframeAPIReady .

I am trying to insert youtube videos with the iframe API in to an existing page with the help of a chrome extension content script. But I cannot get the onYouTubeIframeAPIReady to trigger.

manifest.json

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

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

在chrome应用程序中，我可以使其与 webview 一起使用，但这似乎在扩展程序中不可用.

In a chrome-app I was able to make it work with a webview but this does not seem to be available in extensions.

推荐答案

我解决了问题，这是解决方案.

I solved the problem, here is the solution.

我尝试了代码注入方法的所有变体，但问题是YouTube API脚本定义了一个匿名函数，该函数期望窗口作为输入参数.因此，即使遵循不加载外部脚本的建议(Chrome网上应用店可能会删除您的扩展程序)，并且拥有以不同方式包含的本地文件，我也无法通过以下方式触发 onYouTubeIframeAPIReady YouTube API脚本.只有将脚本粘贴到定义了 onYouTubeIframeAPIReady 的同一文件中之后，我才能看到视频.但是为了更好地组织代码，因此可以与ES6导入(通过Webpack)一起使用，我执行了以下步骤.

I tried all variants of the code injection method but the problem was the the YouTube API script was defining an anonymous function that expected the window as an input argument. So even after following the advice of not loading external scripts (chrome web store might remove your extension) and having a local file that I included with different means I was not able to get the onYouTubeIframeAPIReady to be triggered by the YouTube API script. Only after pasting the script into the same file where I defined onYouTubeIframeAPIReady I was able to see the video. However to organize the code better, so it works with ES6 imports (via Webpack) I did the following steps.

下载YouTube API脚本( https://www.youtube.com/iframe_api 参见 https://developers.google.com/youtube/iframe_api_reference )到本地文件.

Download the YouTube API script (https://www.youtube.com/iframe_api see https://developers.google.com/youtube/iframe_api_reference) to a local file.

通过将脚本从以下位置更改为采用脚本作为模块工作

Adopt the script to work as module by changing the the script from

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

到

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

这会将匿名函数调用更改为以ES6模块样式导出的函数，并且匿名函数中的 this 对象与 window 交换.我将其保存为 youtube-iframe-api.js

This changes the anonymous function call to a function that is exported in a ES6 module style and the this object in the anonymous function is exchanged with the window. I saved it in the file as youtube-iframe-api.js

现在我可以通过以下代码在另一个模块中使用YouTube API

Now I was able to use the YouTube API in another module with the following 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();

这篇关于chrome扩展内容脚本中的youtube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！