In the extension I’m working on I’m adding an export to/import from file option for Storage settings. In normal Firefox and Chrome this works as expected: trigger the download/save as dialog box for the user to save settings from the Storage object to a local file. However, Firefox Developer Edition has caused me a lot of issues.
Using the following code results in Firefox developer making the whole page white, which is… uh… progress from it not doing anything before, but it still doesn’t open the download dialog. Like I said, in Firefox and Chrome this works as expected.
var about = document.querySelector('#about');
var importButton = document.querySelector('#import_file');
var exportButton = about.appendChild(document.createElement('button'));
exportButton.type = 'button';
exportButton.classList.add('button');
exportButton.textContent = 'Export Preferences';
exportButton.addEventListener('click', ExportPrefs);
var exportAnchor = about.appendChild(document.createElement('a'));
function ExportPrefs() {
Storage.get().then((prefs) => {
var content = new Blob([JSON.stringify(prefs)], {type: 'text/plain'});
var url = window.URL.createObjectURL(content);
exportAnchor.href = url;
exportAnchor.download = 'preferences.json';
exportAnchor.click();
window.URL.revokeObjectURL(url);
});
}
importButton.addEventListener('change', function(evt) {
var reader = new FileReader;
reader.onload = function () {
var json = JSON.parse(reader.result);
Storage.set(json);
location.href = location.href;
}
reader.readAsText(evt.target.files[0]);
})