chrome.downloads.download API saveAs dialogue is flashing on the screen and then closes before i see the dialogue

Question

i am developing chrome extension and i want to set the download location for the downloadable files. So i am using chrome.downloads.download API saveAs:true.It is working fine in windows OS but in Mac OS saveAs popup is flashing on the screen and then extension popup and saveAs dialogue is closing before i see them.

Any idea?

My updated code:

manifest.json

{
  "name": "Download Selected Links",
  "description": "Select links on a page and download them.",
  "version": "0.1",
  "minimum_chrome_version": "16.0.884",
  "permissions": ["downloads", "<all_urls>"],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {"default_popup": "popup.html"},
  "manifest_version": 2
}

popup.js

var allLinks = [];
var visibleLinks = [];
var filename = [];
var count = 0;

// Display all visible links.
function showLinks() {
  var linksTable = document.getElementById('links');
  while (linksTable.children.length > 1) {
    linksTable.removeChild(linksTable.children[linksTable.children.length - 1])
  }
  for (var i = 0; i < visibleLinks.length; ++i) {
    var row = document.createElement('tr');
    var col0 = document.createElement('td');
    var col1 = document.createElement('td');
    var checkbox = document.createElement('input');
    checkbox.checked = true;
    checkbox.type = 'checkbox';
    checkbox.id = 'check' + i;
    col0.appendChild(checkbox);
    col1.innerText = visibleLinks[i];
    col1.style.whiteSpace = 'nowrap';
    col1.onclick = function() {
      checkbox.checked = !checkbox.checked;
    }
    row.appendChild(col0);
    row.appendChild(col1);
    linksTable.appendChild(row);
  }
}

function toggleAll() {
  var checked = document.getElementById('toggle_all').checked;
  for (var i = 0; i < visibleLinks.length; ++i) {
    document.getElementById('check' + i).checked = checked;
  }
}

function  downloadLinks() {
var urlArray = new Array();
  for (var i = 0; i < visibleLinks.length; ++i) {
    if (document.getElementById('check' + i).checked) {
      urlArray.push(visibleLinks[i]);
    }
  }
  var zip = new JSZip();
  downloadFile(urlArray[count], onDownloadComplete, urlArray, zip);
}

// Re-filter allLinks into visibleLinks and reshow visibleLinks.
function filterLinks() {
  var filterValue = document.getElementById('filter').value;
  if (document.getElementById('regex').checked) {
    visibleLinks = allLinks.filter(function(link) {
      return link.match(filterValue);
    });
  } else {
    var terms = filterValue.split(' ');
    visibleLinks = allLinks.filter(function(link) {
      for (var termI = 0; termI < terms.length; ++termI) {
        var term = terms[termI];
        if (term.length != 0) {
          var expected = (term[0] != '-');
          if (!expected) {
            term = term.substr(1);
            if (term.length == 0) {
              continue;
            }
          }
          var found = (-1 !== link.indexOf(term));
          if (found != expected) {
            return false;
          }
        }
      }
      return true;
    });
  }
  showLinks();
}

chrome.runtime.onMessage.addListener(function(links) {
  for (var index in links) {
    allLinks.push(links[index]);
  }
  allLinks.sort();
  visibleLinks = allLinks;
  showLinks();
});

window.onload = function() {
  document.getElementById('filter').onkeyup = filterLinks;
  document.getElementById('regex').onchange = filterLinks;
  document.getElementById('toggle_all').onchange = toggleAll;
  document.getElementById('downloadButtonId').onclick = downloadLinks;

  chrome.windows.getCurrent(function (currentWindow) {
    chrome.tabs.query({active: true, windowId: currentWindow.id},
                      function(activeTabs) {
      chrome.tabs.executeScript(
        activeTabs[0].id, {file: 'source.js', allFrames: true});
    });
  });
};

source.js

var links = [].slice.apply(document.getElementsByTagName('a'));
links = links.map(function(element) {
  var href = element.href;
  var hashIndex = href.indexOf('#');
  if (hashIndex >= 0) {
    href = href.substr(0, hashIndex);
  }
  return href;
});

links.sort();

// Remove duplicates and invalid URLs.
var kBadPrefix = 'javascript';
for (var i = 0; i < links.length;) {
  if (((i > 0) && (links[i] == links[i - 1])) ||
      (links[i] == '') ||
      (kBadPrefix == links[i].toLowerCase().substr(0, kBadPrefix.length))) {
    links.splice(i, 1);
  } else {
    ++i;
  }
}

chrome.runtime.sendMessage(links);

background.js

function downloadFile(url, onSuccess, arrayOfUrl, zip) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = "blob";
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (onSuccess) {
        onDownloadComplete(xhr.response, arrayOfUrl, zip);
      }
    }
  }
  xhr.send(null);
}

function onDownloadComplete(blobData, urls, zip){
  if (count < urls.length) {
    blobToBase64(blobData, function(binaryData){
      // add downloaded file to zip:
      var fileName = urls[count].substring(urls[count].lastIndexOf('/')+1);
      // zip.file(fileName, binaryData, {base64: true});
      zip.file(fileName+".docx", binaryData, {base64: true}); //file"+count+".docx"
      if (count < urls.length -1){
        count++;
        downloadFile(urls[count], onDownloadComplete, urls, zip);
      } else {
        chrome.runtime.getBackgroundPage(function () {
          zipAndSaveFiles(zip);
        });
      }
    });
  }
}

function blobToBase64(blob, callback) {
  var reader = new FileReader();
  reader.onload = function() {
    var dataUrl = reader.result;
    var base64 = dataUrl.split(',')[1];
    callback(base64);
  };
  reader.readAsDataURL(blob);
}

function zipAndSaveFiles(zip) {
  chrome.windows.getLastFocused(function(window) {
    var content = zip.generate(zip);
    var zipName = 'download.zip';
    var dataURL = 'data:application/zip;base64,' + content;
    chrome.downloads.download({
      url:      dataURL,
      filename: zipName,
      saveAs:   true
    });
  });
}

Answer 1

This is a known bug on MAC for over 3 years now. As a work-around, you can delegate the dialog-opening-zipping-and-downloading action to your background page.

In order to achieve this, you need to make the following modification to your code (organized by file):

popup.html (or whatever you call it)

Remove JSZip (you only need it in the background-page now).

manifest.json

// Replace:
"background": {
  "scripts": ["background.js"]
},
// with:
"background": {
  "scripts": ["jszip.js(or whatever the name)", "background.js"]
},

background.js

// Replace:
if (onSuccess) {
    onDownloadComplete(xhr.response, arrayOfUrl, zip);
}
// with:
if (onSuccess) {
    onSuccess(xhr.response, arrayOfUrl, zip);
}

// Replace:
chrome.runtime.getBackgroundPage(function () {
    zipAndSaveFiles(zip);
});
// with:
zipAndSaveFiles(zip);

// Add:
var count;
chrome.runtime.onMessage.addListener(function (msg) {
  if ((msg.action === 'download') && (msg.urls !== undefined)) {
    // You should check that `msg.urls` is a non-empty array...
    count = 0;
    var zip = new JSZip();
    downloadFile(msg.urls[count], onDownloadComplete, msg.urls, zip);
  }
}

popup.js

// Replace:
function downloadLinks() {
    ...
}
// with:
function downloadLinks() {
  var urlArray = new Array();
  for (var i = 0; i < visibleLinks.length; ++i) {
    if (document.getElementById('check' + i).checked) {
      urlArray.push(visibleLinks[i]);
    }
  }
  //var zip = new JSZip();
  //downloadFile(urlArray[count], onDownloadComplete, urlArray, zip);
  chrome.runtime.sendMessage({
    action: 'download',
    urls:   urlArray
  });
}

_{(As I already mentioned, I am only guessing here, since I am not able to reproduce the issue.)}