所以我正在尝试制作一个 chrome 扩展。当我将它作为普通 html 页面运行时,我的代码工作正常,但是当我使用浏览器操作时,我的启用/禁用按钮不起作用。当我按下启用时它没有做任何事情(它应该切换到禁用)。想知道是否有一些我不知道的东西,比如权限之类的。我没有在我的 json 页面中设置任何权限,但我认为这不是问题所在。想知道你们是否可以看看我错过了什么。这是我的代码。
<html>
<head>
<link rel="stylesheet" type="text/css" href="nosidebar.css">
<script type="text/javascript">
function enableBtn(){
document.getElementById("btn1").style.display = "none";
document.getElementById("btn2").style.display = "";
return false;
}
function disableBtn(){
document.getElementById("btn2").style.display = "none";
document.getElementById("btn1").style.display = "";
return false;
}
</script>
</head>
<body>
<div id="button">
<a href="javascript:void(0)" class="myButton1" title="Click to disable" id="btn1" style="display:;" onclick="enableBtn(); return false;">Enabled</a>
<a href="javascript:void(0)" class="myButton2" title="Click to enable" id="btn2" style="display:none;" onclick="disableBtn(); return false;">Disabled</a>
</div>
<div id="text">
You must refresh the page for the change to take effect.
</div>
</body>
</html>
感谢@duskwuff 我已经解决了我的问题。我创建了一个单独的 js 文件并使用了以下代码。
function enableBtn(){
document.getElementById("btn1").style.display = "none";
document.getElementById("btn2").style.display = "";
return false;
}
function disableBtn(){
document.getElementById("btn2").style.display = "none";
document.getElementById("btn1").style.display = "";
return false;
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById("btn1").addEventListener("click", enableBtn);
document.getElementById("btn2").addEventListener("click", disableBtn);
});
最佳答案
作为 Google Chrome 扩展的一部分的 HTML 页面总是有一个内容安全策略集,它禁止在属性(例如 onclick
)和内联 <script>
中使用内联脚本。标签。您需要在单独的 Javascript 文件中定义这些脚本,并在该脚本中绑定(bind)事件处理程序,例如
<script src="nosidebar.js"></script>
在那个文件中:
function enableBtn() { ... }
function disableBtn() { ... }
document.getElementById("btn1").addEventListener("click", enableBtn);
document.getElementById("btn2").addEventListener("click", disableBtn);
有关内容安全政策及其与 Chrome 扩展程序的关系的更多信息,请参阅:
https://developer.chrome.com/extensions/contentSecurityPolicy
关于javascript - Chrome 扩展程序的 HTML/Javascript 不能正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29482489/