我想在“内容脚本”Google Chrome 扩展程序中使用“YouTube iframe API”。我应该如何在我的扩展程序中要求 Youtube iframe API?
Youtube iFrame API 的 URL:https://www.youtube.com/iframe_api 。
您通常在 list 文件中包含 Google Chrome 扩展程序中的脚本,但是 Chrome 的扩展程序页面会抛出错误,因为 URL 不以 .js 结尾。
此外,该 URL 处的脚本似乎尝试注入(inject) <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
}
});
}
我应该采取哪些不同的做法?如何正确包含此脚本?
最佳答案
Rob W 的回答涵盖了这种情况:Insert code into the page context using a content script ,参见方法1和方法2。
一般来说,因为内容脚本在 isolated word 中执行,如果您将 youtube api 包含为 <script>
标签(在网页世界中)在内容脚本(在孤立世界中)中初始化 youtube 播放器时,由于内容脚本和 <script>
,它将失败。标签不能访问彼此定义的变量/函数。
一种解决方法是通过 <script>
注入(inject)这些代码标签,请参阅以下示例。
list .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();
});
关于javascript - 在 Google Chrome 扩展程序中需要外部 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38218223/