크롬 확장 프로그램 : 내 팝업 파일에 내재 된 appendchild

개인적으로 사용하기 위해 비밀번호 관리자로 만들고 싶습니다. 안전하지 못하지만 걱정하지 않습니다.크롬 확장 프로그램 : 내 팝업 파일에 내재 된 appendchild

ui/default_popup 파일에 내 암호 목록을 만드는 데 문제가 있습니다. 스크롤바를 사용하여 div를 만들었습니다. 자바 스크립트에서이 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; 
}

출처

2017-11-21 andr813c

실행 인라인 JS는 확장에 금지되어 있습니다. JS 코드를 외부 파일로 이동하십시오. – Deliaz

코드는, 그러나 그것은 팝업에서 Chrome disallows inline scripts 때문에 작동하지 않는, 좋은 (그리고 배경) 페이지로 이동합니다. 당신이 DevTools로와 팝업 페이지를 검사하는 경우

는 다음과 같은 오류가 나타납니다 :

<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

크롬 확장 프로그램 : 내 팝업 파일에 내재 된 appendchild

답변

관련 문제