I am a beginner to chrome extension development. My problem is nothing but the alert box is not coming and I think the javascript block itself is not working when I run the application as an extension. But it is working fine in firefox and chrome browser properly when I run the HTML file alone. can anyone help me?
manifest code
{
"name": "Intruder",
"description": "Monitoring all your activities.",
"version": "1.1",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_title": "Watching you",
"default_icon": "badge.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
HTML code
<html>
<head>
<title>Intruders World</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<script src="jscript.js"></script>
</head>
<body style="background-color: whitesmoke">
<script>
function myFunction() {
var x = document.forms["myForm"]["username"].value;
if (x == "") {
window.alert("u have to enter it");
document.getElementById("demo").innerHTML = "box must be filled!";
return false;
}
}
</script>
<p id="demo">Password Locker</p>
<form name="myForm">
Media Name:<br>
<input type="text" name="medianame">
<br>
User name:<br>
<input type="text" name="username">
<br>
Type Password:<br>
<input type="password" name="passwd">
<br>
Re-type Password
<input type="password" name="repasswd">
<br><br>
<input type="submit" value="Save" onclick="myFunction()">
</form>
</body>
</html>
css code
input[type=submit] {
background-color: #404040;
border: none;
color: white;
padding: 10px 22px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
border-radius: 30px;
}
