it can not access popup.js file after creating a chrome extension

google-chrome-extension

Solution

You've got `manifest_version : 2` in your manifest, so please go read about the changes it introduces.... http://code.google.com/chrome/extensions/manifestVersion.html You got in the console `Refused to execute inline event handler because of Content-Security-Policy`, because of the onclick event handler in your html (`<input type="button" value="Hesapla" onclick="hesaplama()" />`). With manifest version 2 this isnt allowed, you need to attach the event listner from your js code and not in the html. Here's a working version of your code.... popup.html

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>

    <!-- JavaScript and HTML must be in separate files for security. -->
    <script src="popup.js"></script>
  </head>
  <body>
        <form name="form">
            <div id="sayi1">Sayı 1 :    <input type = "text" name="deger1"></div> 
            <div id="sayi2">Sayı 2 :    <input type = "text" name="deger2"></div> 
            <div id="sonuc">Sonuç :     <input type = "text" name="cevap"></div>
            <div id="button"><input type="button" value="Hesapla" /></div>
        </form>
  </body>
</html>

popup.js

function hesaplama()
{
var sayı1 = window.document.form.deger1.value;
var sayı2 = window.document.form.deger2.value;
var toplam = (parseFloat(sayı1) + parseFloat(sayı2)) ;
window.document.form.cevap.value = toplam;
}
window.onload = function(){
    document.querySelector('input[value="Hesapla"]').onclick=hesaplama;
}

Problem

manifest.json ``` { "name": "Summer", "version": "1.0", "manifest_version": 2, "description": "This is an addition extension", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" } } ``` popup.html ``` <!doctype html> <html> <head> <title>Getting Started Extension's Popup</title> <!-- JavaScript and HTML must be in separate files for security. --> <script src="popup.js"></script> </head> <body> <form name="form"> <div id="sayi1">Sayı 1 : <input type = "text" name="deger1"></div> <div id="sayi2">Sayı 2 : <input type = "text" name="deger2"></div> <div id="sonuc">Sonuç : <input type = "text" name="cevap"></div> <div id="button"><input type="button" value="Hesapla" onclick="hesaplama()" /></div> </form> </body> </html> ``` popup.js ``` function hesaplama() { var sayi1 = window.document.form.deger1.value; var sayi2 = window.document.form.deger2.value; var toplam = parseFloat(sayi1) + parseFloat(sayi2) ; window.document.form.cevap.value = toplam; } ``` When i load this extension, i can see normally. But when i filled the deger1 and deger2 textbox and clicked the button, function is not working, in the sonuc textbox (result textbox) is null. How can i fix it? I am new at creating chrome extensions. Thanks for your help.

Original source