Chrome 扩展程序：无法在我的弹出文件中附加子项答案

【问题标题】：Chrome Extension : Cant appendchild in my popup fileChrome 扩展程序：无法在我的弹出文件中附加子项
【发布时间】：2018-07-05 04:10:55
【问题描述】：

我想让自己成为一个密码管理器，仅供私人使用。我知道这不安全，但我不在乎。

我在 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"
  }
}

默认弹出窗口：

<!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;
}

【问题讨论】：

扩展中禁止运行内联JS。将您的 JS 代码移动到外部文件。

标签： javascript html google-chrome google-chrome-extension

【解决方案1】：

代码很好，但是默认情况下它在弹出（和背景）页面中的Chrome disallows inline scripts 中不起作用。

如果您使用 devtools 检查弹出页面，您将看到以下错误：

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self' blob: filesystem: chrome-extension-resource:”。启用内联执行需要“unsafe-inline”关键字、哈希（“sha256-CQOsMNzuQN6qPlC5mygdPgROsx1yvlMvr5K/pf7W2Qk=”）或随机数（“nonce-...”）。

请注意，Chrome 也不允许内联事件处理程序，例如

<button onclick="test()">

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

可以通过使用您的代码创建 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>

【讨论】：

谢谢！就是这样......如果只有我遵循的“教程”会告诉我......这是非常重要的信息