Chrome扩展程序：在我的弹出文件中无法添加附加内容

Question

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

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

Answer 1

代码很好，但由于Chrome默认情况下不允许在弹出（和背景）页面中使用内联脚本，因此无法正常工作。

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

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self'blob：filesystem：chrome-extension-resource：”。 可以使用'unsafe-inline'关键字，散列（'sha256-CQOsMNzuQN6qPlC5mygdPgROsx1yvlMvr5K / pf7W2Qk ='）或nonce（'nonce -...'）来启用内联执行。

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

<button onclick="test()">

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“script-src'self'blob：filesystem：chrome-extension-resource：”。 要么是'unsafe-inline'关键字，哈希（'sha256 -...'），要么是nonce（'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>

Chrome扩展程序：在我的弹出文件中无法添加附加内容

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-11-21 11:21:11

Chrome扩展程序：在我的弹出文件中无法添加附加内容

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-11-21 11:21:11

解决方案1
3 已采纳 2017-11-21 11:21:11