I'm devoloping a chrome extension that uses an <input type="file"> inside the popup.html.

The problem is:

• When is tested inside chrome-extension://ID_EXTENSION/popup.htmlit works as inteded.

  • Note: I don't know why this method of debuging the extension is not the first thing mentioned in the Getting Started guide.

• When is tested in normal envoriment (clicking the extension) the file is not upload correctly. Maybe is because, when the file selector dialog is opened, the chrome extensions closes.

Sample code of how this is implimented:

popup.html

<div id="footer" class="popup_footer">
  <label for="upload" class="badge upload"> &#11014; </label>
  <input type="file" id="upload" href="#" title="&#128190;" />
</div>

popup.js

document
  .getElementById("upload")
  .addEventListener("change", function(e) {
            var file = e.target.files[0];
            var reader = new FileReader();
            reader.onload = function(e) {
                var data = JSON.parse(e.target.result);
                chrome.storage.sync.set({data: data})
            };
            reader.readAsText(file)

As a workaround I tested:

1. Upload it in the chrome-extension url mentioned before.
2. Using an auxiliary options.html page

There is a way to achieve this without a workaround? Thanks in advance