Question

我正在制作一个Chrome扩展程序来播放音乐。您可以按开始，暂停和重新开始音乐的按钮。但是，当我使用扩展名并按一个按钮时，出现此错误：

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“ script-src'self'blob：文件系统：chrome-extension-resource：”。要启用内联执行，需要使用'unsafe-inline'关键字，哈希（'sha256 -...'）或随机数（'nonce -...'）。

我不知道发生了什么，因为这是我的第一个扩展。我试图查找一个随机数，unsafe-inline关键字和内联执行，但是我发现的一切确实令人困惑。我将不胜感激。

manifest.json

{
"manifest_version":2,

"name":"Music Player",
"description":"Play Music",
"version":"1.0",

"browser_action":{
    "default_popup":"popup.html"
},

"permissions":[
    "activeTab"
]
}

popup.html

<html>
<head>

<link rel="stylesheet" href="styles.css">
<script src="popup.js"></script>


</head>
<body>

<center>
<h1>Music Player</h1>
<h3>Songs:</h3>

<div id="ludicrous_speed">Ludicrous Speed 
<audio id="ludicrous" src="songs/ludicrous_speed.mp3" 
preload="auto"></audio>
<button class="Start" 
onclick="Start(ludicrous)">Start</button>
<button class="Pause" 
onclick="Pause(ludicrous)">Pause</button> 
<button class="Restart" 
onclick="Restart(ludicrous)">Restart</button>
</div>

</center>

</body>
</html>

popup.js

function Start(song) {
song.play();
}

function Pause(song) {
song.pause();
}

function Restart(song) {
song.currentTime = 0;
}

styles.css

body {

width:300px;

}

.Start {
background-color: #42f46e;
border-color: #42f46e;
border-radius: 30%;
}

.Pause {
background-color: #f4e349;
border-color: #f4e349;
border-radius: 30%;
}

.Restart {
background-color: #e03838;
border-color: #e03838;
border-radius: 30%;
}

内联脚本在chrome扩展程序中不起作用

0 个答案: