Robert Robert - 1 month ago 6
Javascript Question

Chrome extension form input text is blank on submit

I'm trying to build a chrome extension that downloads a bunch of items from links, the main logic is in my

download.js
file and I want to be able to specify in which downloads subfolder I'd like to bundle them all but the value of the input field seems to be empty. Here's my code so far

popup.html

<!doctype html>
<html>
<head>
<title>Download CVs</title>
<script src="popup.js"></script>
</head>
<body>
<form id="folderForm">
Subdir of downloads:
<input type="text" id="folder">
<input type="submit" id="download" value="Download CVs">
</form>
</body>
</html>


popup.js

function bundleItems() {
chrome.tabs.executeScript({
file: 'download.js'
});
}

document.addEventListener('DOMContentLoaded', function() {
var downloadButton = document.getElementById('download');
downloadButton.addEventListener('click', bundleItems);
});

chrome.extension.onRequest.addListener(function(logs) {
var folder = document.getElementById('folder').value;

logs.map(function(log) {
chrome.downloads.download({
url: log.attachment.link,
filename: folder + '/' + log.attachment.filename
});
});
});


I'm sending information from
download.js
to
popup.js
and everything works if I try to download it in downloads, so I feel posting my
download.js
file will be useless. However, if I try to display the
folder
variable, it's empty. I've searched for lots of other posts on the same issue and none of the solutions seem to work for me.

Xan Xan
Answer

You cannot submit to a Chrome extension page. There is no web server to process your POST request in this case. Doing so simply reloads the document (clearing your value from the form).

You need to prevent submitting instead, by specifying type="button" for your button.

Comments