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