我创建了一个 JavaScript 变量,当我单击按钮时,它应该增加 1,但它没有发生。
Here's manifest.json
.
{
"name":"Facebook",
"version":"1.0",
"description":"My Facebook Profile",
"manifest_version":2,
"browser_action":{
"default_icon":"google-plus-red-128.png",
"default_popup":"hello.html"
}
}
这是html页面的代码
<!DOCTYPE html>
<html>
<head>
<script>
var a=0;
function count()
{
a++;
document.getElementById("demo").innerHTML=a;
return a;
}
</script>
</head>
<body>
<p id="demo">=a</p>
<button type="button" onclick="count()">Count</button>
</body>
</html>
我希望扩展程序向我显示 a 的值,并在每次单击扩展程序或按钮时将其加一
![picture of the extension](https://i.stack.imgur.com/G0dMA.png)
您的代码无法正常工作,因为它违反了默认值内容安全政策。我创建了一个一分钟的截屏视频来显示问题所在:
![1 minute screencast to show what's wrong screencast](https://i.stack.imgur.com/s8Wxd.gif)
首先,我展示了如何调试问题。右键单击弹出按钮,然后单击“检查弹出窗口”。执行此操作后,您将看到以下错误消息:
拒绝执行内联脚本,因为它违反了以下内容安全策略指令:“script-src 'self' chrome-extension-resource:”。
这说明您的代码无法正常工作,因为它违反了默认的 CSP:内联 JavaScript 将不会被执行。要解决这个问题,您必须从 HTML 文件中删除所有内联 JavaScript,并将其放入单独的 JS 文件中。
结果如下所示:
hello.html
(弹出页面)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="demo">=a</p>
<button type="button" id="do-count">Count</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
var a=0;
function count() {
a++;
document.getElementById('demo').textContent = a;
}
document.getElementById('do-count').onclick = count;
注意我已经替换了innerHTML
with textContent
。学习使用textContent
代替innerHTML
当您打算更改文本时。在这个简单的示例中,这并不重要,但在更复杂的应用程序中,它可能会成为 XSS 形式的安全问题。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)