Chrome拡張機能：ポップアップファイルに添付ファイルを添付する

私は自分自身をパスワード管理者にしたいと思っています。私は安全ではないが、私は気にしません。Chrome拡張機能：ポップアップファイルに添付ファイルを添付する

ui/default_popupファイルにパスワードのリストを作成する際に問題が発生しています。私はスクロールバーでdivを作っています。パスワードを使ってこのdivの中にいくつかのdivを追加するjavascriptが必要ですが、項目を追加することはできません。

今、私はそれを設定しようとしました、ボタンがあります。私がそれを押すと、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; 
}

出典

2017-11-21 andr813c

実行インラインJSは拡張で禁止されています。 JSコードを外部ファイルに移動します。 – Deliaz

コードはしかし、それは、ポップアップでChrome disallows inline scriptsので、動作していない、大丈夫です（と背景）ページを表示します。

あなたはデベロッパーツールでポップアップページを調べると、次のエラーが表示されます：クロムもこれらのエラーは

<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.

のように、インラインのイベントハンドラをすることができます許可していない

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.

注意をコードを使用して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>

出典

2017-11-21 11:21:11 Maluen

ありがとうございました！これはそれだった...もし私が従った 'チュートリアル'だけが私に言っただろう...これはかなりイモータントな情報です – andr813c

Chrome拡張機能：ポップアップファイルに添付ファイルを添付する

答えて

関連する問題