All geek questions in one place

Warning does not appear in popup.html of chrome extension

I'm still very new to chrome extensions and just checking things out. Right now I have popup.html, which is in short form, which I want to create an alert when the button is clicked. I can’t understand all my life why it doesn’t work.

<!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 did onload in the body tag to see if a warning opens, but that is not the case. In popup.js, I have a warning open on window.onload, but this works.

+6
source share
2 answers

The function stops after returning false. Put return false at the end of the statement, then your warning should work. Or you can pull it out.

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

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

Inline JavaScript will not execute

Continuous JavaScript, as well as dangerous methods from string to JavaScript, such as eval, will not be executed. This restriction forbids both inline blocks and inline event handlers> (for example,).

Source here

+9
source

This may be your problem: inline scripts do not work with "manifest_version": 2

So, I tested, and with the next 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://*/*" ] }

In any case .. it would be better to handle actions in popup.js, but first change the 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 in the <head> , in popup.html, just above 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 helpful. Regards, Jim ..

+3
source

Source: https://habr.com/ru/post/912693/

More articles:


All Articles