How I can execute JavaScript in popup.html

Question

It works great on normal HTML page, but on my Chrome extension don't work.

I get this error:

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.

Manifest:

{
  "name": "script",
  "version": "1.3.2",
  "manifest_version": 2,
  "description": "script",
    "icons": {
    "16": "assets/immagine.png",
    "128": "assets/immagine.png"
  },
  "permissions":[
    "tabs", "storage"
   ],
  "browser_action": {
          "default_icon": {               
            "16": "assets/immagine.png",        
            "24": "assets/immagine.png",       
            "32": "assets/immagine.png"            
          },
         "default_popup": "popup.html",
         "scripts": ["calculator.js"]
   }

}

popup.html:

<html>
    <head>
        <script>

        var ammontare = 0 ;
        var npack = 0;
        var nprel = 0;
        var minprelievo = 0;

        function c(val)
        {
            document.getElementById("d").value=val;

        }

        function math(val)
        {
            document.getElementById("d").value+=val;
        }
        function e(pack)
        {   
            ammontare = document.getElementById("e").value;

            if (pack == 20) nprel = 5;
            if (pack == 30) nprel = 4;
            if (pack == 50) nprel = 6;
            if (pack == 70) nprel = 2;
            if (pack == 100) nprel = 3;
            var fut = (Number(ammontare)+Number(ammontare/4));

            var npack = (Number(ammontare)/Number(pack));
            nprel = (npack*nprel)+5;

            var minprelievo = (fut*nprel);
            var minprelievo = minprelievo.toFixed( 2 );

            try
            {
              c(minprelievo)
            }
            catch(e)
            {
              c('Error')
            }
        }


        </script>
    </head>

<body>
        INSERT Value:   
    <p><div class="display"><input type="number" size="15.75" id="e" > $</div></p>
        PRESS BUTTON: 
    <p>
        <input type="button" class="button gray" value="BUTTON1" onclick='e(20)'>
        <input type="button" class="button gray" value="BUTTON2" onclick='e(30)'>
        <input type="button" class="button gray" value="BUTTON3" onclick='e(50)'>
        <input type="button" class="button gray" value="BUTTON4" onclick='e(70)'>
        <input type="button" class="button gray" value="BUTTON5" onclick='e(100)'>  
     </p>


    <p>RESULTS:</p>
    <p><div class="display"><input type="number" readonly size="15.75" id="d"> $</div></p>

</body>
</html>

score 1 · Answer 1 · answered Apr 14 '17 at 16:07

1

Place the Javascript code on a file code popup.js and place it on the same folder than your popup.html

Then load it with: <script src="popup.js"></script>

This is because the Content Security Policy: https://developer.chrome.com/extensions/contentSecurityPolicy

answered Apr 14 '17 at 16:07

nitobuendia

1,228
7
18

Hi, i did it correctly but don't work – Giuseppe DjMinerva Cambria Apr 14 '17 at 19:22
Still the same error or different? How is the new code? – nitobuendia Apr 15 '17 at 18:31

How I can execute JavaScript in popup.html

1 Answers1