且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

chrome扩展内容脚本中的***视频

更新时间:2023-12-05 08:51:34

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

I solved the problem, here is the solution.

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

I tried all variants of the code injection method but the problem was the the *** 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 on***IframeAPIReady to be triggered by the *** API script. Only after pasting the script into the same file where I defined on***IframeAPIReady 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.

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

Download the *** API script (https://www.***.com/iframe_api see https://developers.google.com/***/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("on***PlayerAPIReady");Ub&&Ub();})();

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

这会将匿名函数调用更改为以ES6模块样式导出的函数,并且匿名函数中的 this 对象与 window 交换.我将其保存为 ***-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 ***-iframe-api.js

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

Now I was able to use the *** API in another module with the following code

import ***Api from './***-iframe-api';

function onPlayerReady(event) {
  event.target.playVideo();
},

window.on***IframeAPIReady = () => {
  this.player = new YT.Player('***-iframe', {
    height: '100',
    width: '100',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
    }
  });
}
***Api();