I'm trying to have a form in my chrome extension popup that has its data processed by js when it's submitted. However, without any errors, nothing happens on submission.
manifest.json
"action":{
"default_popup": "index.html"
},
"background": {
"service_workers": ["app.js"]
}
index.html
<!doctype html>
<html>
<body>
<form id="form">
<input id="grade" type="text" placeholder="grade">
<input id="score" type="text" placeholder="score">
<input type="submit" value="Save">
</form>
</body>
</html>
app.js
document.addEventListener('DOMContentLoaded', function () {
var form = document.getElementById("form")
form.addEventListener('submit', function(e){
var grade = document.getElementById("grade").value
var score = document.getElementById("score").value
alert(grade)
chrome.storage.sync.set({grade: grade})
chrome.storage.sync.get(['grade'], function(result) {
console.log('Value currently is ' + result.key);
});
})
})
Is this happening because I don't include the <script src="app.js"> tag? Chrome gives an error if any script tags are inside the html of the popup.
document.addEventListener('DOMContentLoaded', function() {
var form = document.getElementById("form");
form.addEventListener('submit', function(e) {
e.preventDefault();
var grade = document.getElementById("grade").value;
var score = document.getElementById("score").value;
console.log(grade);
// chrome.storage.sync.set({grade: grade});
// chrome.storage.sync.get(['grade'], function(result) {
// console.log('Value currently is ' + result.key);
// });
});
});<form id="form">
<input id="grade" type="text" placeholder="grade">
<input id="score" type="text" placeholder="score">
<input type="submit" value="Save">
</form>
