我想让自己成为密码管理员,仅供私人使用。我知道它不安全但我不在乎。
我在ui / default_popup文件中创建密码列表时遇到问题。我用滚动条创建了一个div,我想要一些javascript在这个div中添加一些div,用我的密码,但我似乎无法添加项目。
现在我已经尝试过设置它,所以有一个按钮,当我按下它时,它会在我的div中添加一个div。如果我在浏览器中打开它,这可以正常工作,但如果我将它用作我的扩展,它就不会工作,当我点击按钮时没有任何反应。
的manifest.json:
{
"name": "Password Manager",
"manifest_version": 2,
"version": "2",
"version_name": "alpha 1",
"description": "Alpha for my password manager project",
"permissions": [
"activeTab",
"tabs",
"http://*/*", "https://*/*"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "main.html"
}
}
Default_popup:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<meta charset="utf-8">
<script>
function test() {
var element = document.createElement("div");
element.appendChild(document.createTextNode('The man who mistook his wife for a hat'));
document.getElementById('pswcontainer').appendChild(element);
}
</script>
</head>
<body>
<div class="bluebox"><h1 style="color : white;">Password Manager</h1></div>
<div id="maindiv">
<div id="passInBox">
<h3 style="margin-top : 0px; width : 100%; text-align : center;">Please input your universal password:</h3>
<input style="width : 100%;" type="password" id="pswIn">
</div>
<div id="pswcontainer">
<div class="psw">
<button onclick="test()"
</div>
</div>
</div>
<div class="bluebox" style="position: absolute; bottom : 10px; width : 485px;"></div>
</body>
</html>
的CSS:
html {
width : 500px;
height : 590px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
font-family: Arial, Helvetica, sans-serif;
}
.bluebox {
width : 100%;
height : 50px;
background-color: #3b9ddd;
border-radius: 7px;
padding-bottom: 1px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 3px;
margin-bottom: 3px;
}
.psw {
height : 60px;
width : 440px;
margin : 5px;
border : 1px solid black;
}
#passInBox {
margin: auto;
width: 60%;
border: 1px solid grey;
padding: 10px;
}
#maindiv {
padding : 3px;
height : 100%;
}
#pswcontainer {
margin-left: 3px;
margin-right: 3px;
margin-bottom: 3px;
margin-top: 5px;
border-radius: 2px;
width: 467px;
height: 373px;
overflow-y : scroll;
border : 2px solid black;
}
答案 0 :(得分:3)
代码很好,但默认情况下,它在弹出窗口(和背景)页面中的Chrome disallows inline scripts后无法正常工作。
如果使用devtools检查弹出页面,您将看到以下错误:
拒绝执行内联脚本,因为它违反了以下内容安全策略指令:&#34; script-src&#39; self&#39; blob:filesystem:chrome-extension-resource:&#34;。 “不安全 - 内联”和“不安全”。关键字,哈希(&#39; sha256-CQOsMNzuQN6qPlC5mygdPgROsx1yvlMvr5K / pf7W2Qk =&#39;)或nonce(&#39; nonce -...&#39;)是启用内联执行所必需的。
请注意,Chrome也不允许使用内联事件处理程序,例如
<button onclick="test()">
拒绝执行内联事件处理程序,因为它违反了以下内容安全策略指令:&#34; script-src&#39; self&#39; blob:filesystem:chrome-extension-resource:&#34;。 “不安全 - 内联”和“不安全”。关键字,哈希(&#39; sha256 -...&#39;)或nonce(&#39; nonce -...&#39;)是启用内联执行所必需的。
使用您的代码创建一个popup.js脚本可以避免这些错误:
function test() {
var element = document.createElement("div");
element.appendChild(document.createTextNode('The man who mistook his wife for a hat'));
document.getElementById('pswcontainer').appendChild(element);
}
document.querySelector('#pswcontainer button').addEventListener('click', test);
然后通过在弹出页面中包含这样的脚本,还要注意内联处理程序已被删除:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<div class="bluebox"><h1 style="color : white;">Password Manager</h1></div>
<div id="maindiv">
<div id="passInBox">
<h3 style="margin-top : 0px; width : 100%; text-align : center;">Please input your universal password:</h3>
<input style="width : 100%;" type="password" id="pswIn">
</div>
<div id="pswcontainer">
<div class="psw">
<button></button>
</div>
</div>
</div>
<div class="bluebox" style="position: absolute; bottom : 10px; width : 485px;"></div>
<script src="popup.js"></script>
</body>
</html>