Chrome扩展程序弹出窗口中的表单提交 [英] Form Submission within a Chrome Extension popup
问题描述
我正在尝试构建我的第一个Chrome扩展程序.我需要它具有提交的简单表格.我无法在popup.js文件上运行任何文件.我发现这篇文章很相似，但似乎连基本的日志都无法在控制台中工作.如何获取表单提交popup.html的价值chrome扩展名
I'm trying to build my first Chrome Extension. I need it to have a simple form that submits. I'm having trouble getting anything to run on my popup.js file. I found this post to be similar but can't seem to get even the basic logging to work in the console. How to get value of form submission popup.html chrome extension
这是我的popup.html
Here is my popup.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello World</h1>
<form id="useCasePostForm">
<input type="text" id="useCase" />
<input type="submit">
</form>
</body>
</html>
这是我目前尝试的popup.js
Here is my current try at the popup.js
$(function() {
console.log("console logging works");
document.getElementById("useCasePostForm").addEventListener("submit", handleClick, false);
function handleClick(val) {
console.log("calling handleClick"); //printing
console.log(val); //prints undefined
chrome.runtime.sendMessage({
from: "popup",
subject: val
});
}
});
我的另一种尝试是我想到了这一点，我认为我在这方面已经领先于我自己:
My other attempt I came up with this which I think I was getting a bit ahead of myself on:
window.addEventListener('load', function(evt) {
// Handle the bookmark form submit event with our useCasePost function
document.getElementById('useCasePostForm')
.addEventListener('submit', useCasePostFunc);
});
function useCasePostFunc(event){
event.preventDefault();
conosle.log("in the function")
var useCase = document.getElementById("useCase")
//The URL to POST our data to
var postUrl = 'https://localhost:8080/useCases/create';
console.log("in function")
// Set up an asynchronous AJAX POST request
$.ajax({
'url': postUrl,
"type": "POST",
data:{
id:4
}
})
}
这也是我的清单文件.
{
"manifest_version": 2,
"name": "PIT",
"version": "0.1",
"background": {
"scripts":["background.js"]
},
"browser_action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"https://app.hubspot.com/*"
],
"js": ["jquery-3.4.1.min.js", "content.js"]
}
],
"permissions": [
"webRequest",
"tabs",
"<all_urls>"
]
}
如果有人对我如何可以作为第一步接收表单提交有任何指示，将不胜感激.
If anyone has any pointers on how I can receive the form submission as a first step it would be greatly appreciated.
推荐答案
要对此进行跟进，最终成为了获胜的代码.
To follow up on this, this ended up being the winning code.
document.addEventListener('DOMContentLoaded', function () {
console.log("the doc loaded")
var form = document.getElementById("useCasePostForm")
console.log(form)
form.addEventListener('submit',function(e){
e.preventDefault()
console.log("added to the form")
})
});
这篇关于Chrome扩展程序弹出窗口中的表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
