javascript - The Chrome extension popup is not working, click events are not handled -
i have created javascript variable , when click on button should increment 1, not happening.
here's manifest.json.
{ "name":"facebook", "version":"1.0", "description":"my facebook profile", "manifest_version":2, "browser_action":{ "default_icon":"google-plus-red-128.png", "default_popup":"hello.html" } } here code html page
<!doctype html> <html> <head> <script> var a=0; function count() { a++; document.getelementbyid("demo").innerhtml=a; return a; } </script> </head> <body> <p id="demo">=a</p> <button type="button" onclick="count()">count</button> </body> </html> i want extension show me value of , increment 1 each time click on extension or button
your code not working because violates default content security policy. i've created screencast of 1 minute show what's wrong:
first, i've shown how debug problem. right-click on popup button, , click on "inspect popup". after doing that, see following error message:
refused execute inline script because violates following content security policy directive: "script-src 'self' chrome-extension-resource:".
this explains code not working, because violates default csp: inline javascript not executed. solve problem, have remove inline javascript html file, , put in separate js file.
the result shown below:
hello.html (popup page)
<!doctype html> <html> <head> </head> <body> <p id="demo">=a</p> <button type="button" id="do-count">count</button> <script src="popup.js"></script> </body> </html> popup.js
var a=0; function count() { a++; document.getelementbyid('demo').textcontent = a; } document.getelementbyid('do-count').onclick = count;note i've replaced innerhtml textcontent. learn use textcontent instead of innerhtml when intend change text. in simple example not matter, in more complex applications, might become security issue in form of xss.
Comments
Post a Comment