Upload image in chrome extension and extension popup closes

Question

I need to upload image with chrome extension, when file browser is clicked the extension popup closes. How can I handle both the file browser and popup to remain open.

Answer 1

It's a tricky question to answer.

The basic idea is that whenever the popup window loses focus, it is supposed to immediately close, which entails the destruction of the popup's JavaScript context (and your logic breaks as a result). This is not something you can influence.

Modal dialogs such as the file input ought to be an exception, but that doesn't work consistently across all platforms Chrome runs on. Evidence: question, bug.

Whenever you want something to survive popup closing, you normally put it in the background page. This lead to this workaround that places the File input in the background page and triggers its selection from the popup. But there's (unconfirmed) evidence that this does not work anymore. The question above has another, supposedly working answer by injecting the input tag into the current page, but that's subject to failing on "unscriptable" pages such as Chrome Web Store or internal chrome:// pages.

The safest way would be to open a separate tab or popup window to handle the process. This is obviously awkward UX though.

Answer 2

Not sure if you'd actually want to do this, but if you have a small app and it's not a main feat (or you've got high hopes of chrome dev's solving this issue) - as a temp solution you can ask your users to open dev tools while uploading files, popup won't close. Though you're better off putting your logic into a separate file (eg 'background.html') and opening it from popup as a tab like this:

chrome.tabs.create({url: chrome.extension.getURL('background.html')});