I am trying to build a chrome extension popup window that once clicked, will display a form for the user to submit his or her name and the college they attend. I want to then store this information in chrome storage, and once done, it will replace the popup window with a different window that will display a "hello" + (user retreived from chrome storage) + "!" as a header. If the user doesn't enter anything and submits the form, then it won't submit the form and ask them to fill out the form again. I am trying to achieve this, but for some reason, it is not working. The page is just reloading on submit when the information entered, and not proceeding or something like that. What am I doing wrong? My code is down below
Manifest.json
{
"name": "CXhrome Extemsopm",
"description": "my extension",
"version": "0.1.0",
"manifest_version": 2,
"background": {
"scripts": [
"jquery-3.5.1.min.js",
"background.js"
]
},
"browser_action": {
"default_popup": "index.html"
},
"permissions": [
"storage",
"tabs",
"identity",
"notifications"
],
"content_security_policy": "script-src 'self' https://cdn.firebase.com https://apis.google.com https://www.gstatic.com https://kit.fontawesome.com/; object-src 'self'"
}
index.html
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
html {
width: 370px;
height: 500px;
}
.header {
position: absolute;
right: 0;
top: 0;
width: 370px;
height: 60px;
background-color: white;
}
.logo {
position: absolute;
top: 12px;
right: 122px;
}
.form {
position: absolute;
right: 0;
top: 63px;
width: 370px;
height: 437px;
text-align: center;
background-color: whitesmoke;
}
.questionaire {
width: 336px;
position: absolute;
left: 17px;
top: 35px;
padding: 15px;
background-color: white;
border-radius: 25px;
}
</style>
<body>
<section class="header">
<div>
<h1 class="logo">Logo Here</h1>
</div>
</section>
<section class="form">
<form id="form" class="questionaire">
<h1>What is your name?</h1>
<input id="name" class="form-control" type="text" placeholder="Name" required>
<br>
<h2>What college do you attend?</h2>
<select id="college" class="form-select" required>
<option selected>College</option>
<option value="college1">College 1</option>
<option value="college2">College 2</option>
<option value="college3">College 3</option>
</select>
<hr>
<div class="d-grid gap-2">
<button id="link" class="btn btn-primary" type="submit" name="submit">Submit</button>
</div>
</form>
</section>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.js
document.getElementById('link').addEventListener("click", myFunction);
function myFunction() {
var name = document.getElementById('name').value;
var college = document.getElementById('college').value;
if ((name === "" || name == null) && (college === "" || college == null)) {
window.location.replace("index.html");
} else {
chrome.storage.local.set({'name': name, 'college': college}, function () {
window.location.replace("canvas.html");
});
}
}
question from:
https://stackoverflow.com/questions/65545713/popup-refreshing-on-form-submit-in-chrome-extension 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
