Question

我正在尝试使用chrome扩展内容脚本将带有iframe API的YouTube视频插入到现有页面中。但是我无法触发onYouTubeIframeAPIReady。

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

在chrome-app中，我能够使用webview，但这似乎不适用于扩展程序。

Answer 1

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

我尝试了代码注入方法的所有变体，但问题是YouTube API脚本定义了一个匿名函数，该函数期望窗口作为输入参数。因此，即使遵循不加载外部脚本的建议（chrome web store可能会删除您的扩展名）并且使用不同方式包含的本地文件，我也无法通过YouTube API触发onYouTubeIframeAPIReady脚本。只有在将脚本粘贴到我定义onYouTubeIframeAPIReady的同一文件后，我才能看到该视频。但是为了更好地组织代码，所以它适用于ES6导入（通过Webpack）我做了以下步骤。

将YouTube API脚本（https://www.youtube.com/iframe_api请参阅https://developers.google.com/youtube/iframe_api_reference）下载到本地文件。

通过从

更改脚本来采用脚本作为模块

(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

保存在文件中

现在，我可以使用以下代码

在另一个模块中使用YouTube API

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视频

1 个答案: