CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Eric Smith
Eric Smith

Reputation: 1376

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.

Upvotes: 10

Views: 15228

Answers (2)

Larry Battle
Larry Battle

Reputation: 9178

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

Upvotes: 11

Attila Kling
Attila Kling

Reputation: 1787

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..

Upvotes: 4

Related Questions