我想让自己成为一个密码管理器，仅供私有(private)使用。我知道这不安全，但我不在乎。
我在 ui/default_popup 文件中制作密码列表时遇到问题。我制作了一个带有滚动条的 div，我想要一些 javascript 在这个 div 中添加一些 div，使用我的密码，但我似乎无法添加项目。
现在我已经尝试设置它，所以有一个按钮，当我按下它时，它会在我的 div 中添加一个 div。如果我在浏览器中打开它，它工作正常，但如果我将它用作我的扩展，它就不会工作，当我点击按钮时什么也没有发生。
list .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"
}
}
默认弹出窗口:
<!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;
}
最佳答案
代码没问题，但自Chrome disallows inline scripts 起就无法正常工作了默认情况下在弹出(和背景)页面中。
如果您使用 devtools 检查弹出页面，您将看到以下错误:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-CQOsMNzuQN6qPlC5mygdPgROsx1yvlMvr5K/pf7W2Qk='), or a nonce ('nonce-...') is required to enable inline execution.
请注意，Chrome 也不允许内联事件处理程序，例如
<button onclick="test()">
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
可以通过使用您的代码创建 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>
关于javascript - Chrome 扩展 : Cant appendchild in my popup file，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47408945/