Chrome extension form input text is blank on submit

Question

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.

score 1 · Accepted Answer · answered Oct 21 '16 at 12:33

1

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.

answered Oct 21 '16 at 12:33

Xan

74,770
16
179
206

I'm afraid it's still blank after changing it to button – Robert Oct 21 '16 at 12:38
I've tested it a few more times, mostly it works and sometimes the whole extension bugs out, saying I don't have permission, but I guess it's good enough :) thanks – Robert Oct 21 '16 at 12:54
You should check that `executeScript` succeeded (by checking `chrome.runtime.lastError` in a callback); not all URLs are accessible. – Xan Oct 21 '16 at 12:55

score 0 · Answer 2 · answered Oct 21 '16 at 13:14

0

I would add preventDefault() on submit button.

https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault

answered Oct 21 '16 at 13:14

Piotr Szeptynski

36
6

1

That would solve the problem as well, but in a more convoluted way. "Let's make this a submit button, and then refuse to let it submit" vs "Let's not make this a submit button". – Xan Oct 21 '16 at 14:20

Chrome extension form input text is blank on submit

2 Answers2

Linked