我正在尝试构建一个chrome扩展弹出窗口，单击该窗口后，将显示一个表单，供用户提交其姓名和就读的大学。然后我想把这个信息存储在chrome存储中，一旦完成，它将用一个不同的窗口取代弹出窗口，该窗口将显示一个"；你好"+(用户从铬存储中检索(+"作为标头。如果用户没有输入任何内容并提交表单，则不会提交表单并要求他们再次填写表单。我正在努力实现这一目标，但由于某种原因，它没有奏效。当输入信息时，页面只是在提交时重新加载，而不是继续或类似的操作。我做错了什么？我的代码低于
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/bootstrap@5.0.0-beta1/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");
});
}
}
您的案例中快速简单的解决方案：
function myFunction(e) {
e.preventDefault()
我建议你去掉<form>和<button ... type="submit">。这些通常用于使用表单的action属性传递数据。简化您的html结构，并在JS中处理所有内容。如果你要去掉form和type="submit"属性，你可以让JS保持原样。它可以使用form，也可以不使用type="submit"，但无论如何使用form元素都没有意义。