我正在开发一个 Chrome 扩展程序，允许用户在扩展程序中播放 YouTube 视频。我在这里遵循 YouTube 上的 API 指南。 这里是manifest.js 文件
{
"manifest_version": 2,
"name": "Youtube Chrome Extenstion",
"description":"Extenstion which allows users to use youtube from the chrome extenstion and also enables a search feature in the app",
"version": "1.0",
"browser_action":{
"default_icon" : "icon.png",
"default_popup" : "popup.html"
}
}
这里是popup.html代码
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
当在普通网页中运行相同的代码时，它工作得很好，但是当相同的代码以扩展的形式捆绑时，就会失败。不知道问题是什么？
此处错误:
最佳答案
您的问题是Content Security Policy 。欲了解更多详情，请参阅Content Security Policy Level 2 .
在您的 list 中，这是必需的:
"content_security_policy": "script-src https://s.ytimg.com https://*.youtube.com; object-src 'self'"
在 popup.html 中启用 YouTube 视频。
In general, CSP works as a black/whitelisting mechanism for resources loaded or executed by your extensions. Defining a reasonable policy for your extension enables you to carefully consider the resources that your extension requires, and to ask the browser to ensure that those are the only resources your extension has access to. These policies provide security over and above the host permissions your extension requests; they're an additional layer of protection, not a replacement.
扩展程序的固定版本:
// The manifest
{
"manifest_version": 2,
"name": "Youtube Chrome Extenstion",
"description":"Extenstion which allows users to use youtube from the chrome extenstion and also enables a search feature in the app",
"version": "1.0",
"browser_action":{
"default_icon" : "icon.png",
"default_popup" : "popup.html"
},
"content_security_policy": "script-src https://s.ytimg.com https://*.youtube.com; object-src 'self'"
}
// popup.html
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="popup.js"></script>
</body>
</html>
// popup.js
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
关于javascript - 在 Chrome 扩展程序的弹出文件中加载 YouTube 视频时出错？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37619416/