Question

我一直试图在表单中获取用户输入的值，以传递到chrome扩展中的javascript函数。问题是我不知道如何获得用户输入。
这是我的manifest.json文件的一部分：

,"browser_action": {
    "default_icon": "./assets/icon16.png",
    "default_popup": "popup.html"

},

popup.html，即我想提交的表单：

...
<script src = "popup.js"></script>

</head>
    <body>
    <p>Enter here</p>

<div class="ui-widget">
    <form id = "form" >
        <input id = "shows"> </input>
        <input type = "submit" id = "submitButton">
    </form>

</div>
<br>
<br>
</body>

我知道我不能在chrome扩展中使用内联javascript，所以我使用addEventListener来监听表单提交。它当前正在调用函数handleClick（）但是我需要传入输入的值，而我不确定要放什么作为参数。这是我的popup.js文件：

$(function() {
console.log("console logging works");


document.getElementById("form").addEventListener("submit", handleClick());


function handleClick(val) {
    console.log("calling handleClick"); //printing
    console.log(val); //prints undefined

    chrome.runtime.sendMessage({
        from: "popup",
        subject: val
    });
}

}）;

我也试过这个也不起作用：

document.getElementById("form").addEventListener("submit", handleClick(), false);


function handleClick() {

    var show = form.elements[0].value;
    console.log(show); //prints blank
    chrome.runtime.sendMessage({
        from: "popup",
        subject: show
    });
}

Answer 1

当你这样做时：
ProjectName -> Development (repo) -> Database (repo) -> NetOps (repo)
通过在.addEventListener("submit", handleClick(), false)之后放置括号来调用函数并将结果传递给handleClick（在本例中为addEventListener，因为函数没有undefined语句。）

你想要做的是直接将函数传递给return，然后用addEventListener对象来调用它（这称为event）：
callback

如何获取表单提交popup.html chrome extension

1 个答案: