在 chrome 扩展中提交表单时弹出刷新

Question

我正在尝试构建一个 chrome 扩展弹出窗口 window，单击该弹出窗口后，将显示一个表单供用户提交他或她的姓名和他们就读的大学。然后我想将此信息存储在 chrome 存储中，完成后，它将用不同的 window 替换弹出窗口 window，显示“你好”+（用户从 chrome存储）+“！”作为 header。如果用户没有输入任何内容并提交了表单，那么它不会提交表单并要求他们再次填写表单。我正在努力实现这一目标，但由于某种原因，它不起作用。当输入信息时，页面只是在提交时重新加载，而不是继续或类似的事情。我究竟做错了什么？我的代码在下面

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");
        });
    }
}

Answer 1

针对您的情况的快速简单解决方案：

function myFunction(e) {

    e.preventDefault()

我建议您去掉 <form> 和 <button ... type="submit">。这些通常用于使用表单的 action 属性传递数据。简化您的 html 结构并在 JS 中处理所有内容。如果你摆脱 form 和 type="submit" 属性，你可以让你的 JS 保持原样。它可以与 form 一起使用，也可以在没有 type="submit" 的情况下使用，但是无论如何使用 form 元素是没有意义的。

在 chrome 扩展中提交表单时弹出刷新

Popup refreshing on form submit in chrome extension

html

javascript

forms

popup

google-chrome-extension