javascript - Alert not appearing in popup.html of chrome extension

I am still very new with chrome extensions and am just testing things out. Right now I have a popup.html that with a short form that I want to create an alert when submit is clicked. I cannot for the life of me figure out why it's not working.

<!doctype html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="popup.js">

</script>
</head>
<body onload="alert('open')">
<form>
Username: <input type='text' id="username" name='username'></input>
Password: <input type='password' id='password' />
          <button onclick="alert('test');return false;">Login</button>
</form>
</body>
</html>

Any suggestions?

Edit: I even made an onload in the body tag to see if an alert would open there but it doesn't. In the popup.js I have an alert open on window.onload and that works however.

<!doctype html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="popup.js">

</script>
</head>
<body onload="alert('open')">
<form>
Username: <input type='text' id="username" name='username'></input>
Password: <input type='password' id='password' />
          <button onclick="alert('test');return false;">Login</button>
</form>
</body>
</html>

Any suggestions?

Edit: I even made an onload in the body tag to see if an alert would open there but it doesn't. In the popup.js I have an alert open on window.onload and that works however.

Share Improve this question edited Apr 8, 2012 at 18:09 asked Apr 8, 2012 at 17:54 Eric Smith 1,3765 gold badges19 silver badges33 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 11

The function stops after you return false. Put return false at the end of the statement, then your alert should work. Or you could take it out.

 <button onclick="alert('test')">Login</button>

Update After some research I found out the following...

Inline JavaScript will not be executed

Inline JavaScript, as well as dangerous string-to-JavaScript methods like eval, will not > be executed. This restriction bans both inline blocks and inline event handlers > (e.g. ).

Source here

This could be your problem too: inline scripts doesnt work with "manifest_version":2

So, i tested, and with the following manifest, your code works!

{
  "name": "test",
  "version": "1.0",
  "description": "test",
  "manifest_version":1,
  "browser_action": {
    "default_icon": "images/padlock.png",
    "default_popup":"html/popup.html"
  },
  "permissions": [
    "tabs", 
    "http://*/*"
  ]
}

Anyway.. it would be better to handle actions in popup.js, but first, change button attributes in popup.html to the following: <button type="button">Login</button>

popup.js:

$(document).ready(function(){
    $(":button").click(function(){
        alert("test");
        //more code here...
    });
});

Remember to insert jquery.js into your <head> tag, in popup.html, just above of popup.js:

<head>
<title>Test</title>
<script type="text/javascript" src="../js/jquery.js"></script> 
<script type="text/javascript" src="../js/popup.js"></script>
</head>

I wish, it was useful. Regards Jim..

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Alert not appearing in popup.html of chrome extension - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)