Safari Extension - can't download files with JS properly

Question

mihainsto OP

Created Aug ’22

Replies 1

Boosts 0

Views 3.1k

Participants 1

Hello, I am facing issues when I try to download a file in a safari browser extension.

I tried multiple methods, I followed also this thread https://developer.apple.com/forums/thread/119017. But they did not work for me.

For a safari browser extension, it seems that the download href attribute does not work. browser.downloads api is not available, also the window.saveAs is not available.

In a safari browser extension, the download attribute doesn't do anything, it just opens the file in the same tab, and the user is loosing the current tab of the extension. Using window.open as suggested in the topic above helps, but the UX is terrible, because the user has to allow the popup to be opened.

So is there a way to perform file downloads from safari extension?

Here are the methods that I tried:

Creating an element from javascript. The issue here is that the download attribute does not work, it moves the user to the file in the same tab. And the user can't go back.

     const element = document.createElement('a');
    element.setAttribute('href', uri);
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

Using window.open. Here the user needs to approve the popup, and it's a hard/confusing thing to do for a non-experienced user.

 function downloadPWA(content)
{
     var file = new Blob([content],
                    {
                         type: 'text/xml;charset=UTF-8'
                    });
     var reader = new FileReader();
     reader.onload = function()
                    {
                         var popup = window.open();
                         var link = document.createElement('a');
                         link.setAttribute('href', reader.result);
                         link.setAttribute('download', 'filename.txt');
                         popup.document.body.appendChild(link);
                         link.click();
                    }
     reader.readAsDataURL(file);
}

Here is a GitHub repo of a small dummy test extension where I tested the download functions https://github.com/mihainsto/Safari-extension-download-file .

Boost

Answer 1

mihainsto OP

Aug ’22

Found a workaround by using an iframe, and run the download code inside the iframe. And for communication between the iframe and the extension I used window.postMessage.

I added the iframe content and js file to the public folder of the extension.

iframe.html

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="module" src="iframe.js"></script>
</head>
<body>
</body>
</html>

iframe.js

 function downloadFile(filename, uri) {
  const element = document.createElement('a');
 
  element.setAttribute('href', uri);
  element.setAttribute('download', filename);
 
  element.style.display = 'none';
  document.body.appendChild(element);
 
  element.click();
  document.body.removeChild(element);
}
 
window.addEventListener(
  'message',
  function (event) {
    downloadFile(event.data.filename, event.data.uri);
  },
  false,
);

And the download triggering code from the extension.

     const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = 'iframe.html';
    document.body.appendChild(iframe);
 
    setTimeout(() => {
      if (iframe.contentWindow)
        iframe.contentWindow.postMessage(
          { filename, uri },
          window.location.origin,
        );
      setTimeout(() => {
        document.body.removeChild(iframe);
      }, 1000);
    }, 1000);

0

	const element = document.createElement('a');
	element.setAttribute('href', uri);
	element.setAttribute('download', filename);
	element.style.display = 'none';
	document.body.appendChild(element);
	element.click();
	document.body.removeChild(element);
	}

	function downloadPWA(content)
	{
	var file = new Blob([content],
	{
	type: 'text/xml;charset=UTF-8'
	});
	var reader = new FileReader();
	reader.onload = function()
	{
	var popup = window.open();
	var link = document.createElement('a');
	link.setAttribute('href', reader.result);
	link.setAttribute('download', 'filename.txt');
	popup.document.body.appendChild(link);
	link.click();
	}
	reader.readAsDataURL(file);
	}

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<script type="module" src="iframe.js"></script>
	</head>
	<body>
	</body>
	</html>

	function downloadFile(filename, uri) {
	const element = document.createElement('a');

	element.setAttribute('href', uri);
	element.setAttribute('download', filename);

	element.style.display = 'none';
	document.body.appendChild(element);

	element.click();
	document.body.removeChild(element);
	}

	window.addEventListener(
	'message',
	function (event) {
	downloadFile(event.data.filename, event.data.uri);
	},
	false,
	);

	const iframe = document.createElement('iframe');
	iframe.style.display = 'none';
	iframe.src = 'iframe.html';
	document.body.appendChild(iframe);

	setTimeout(() => {
	if (iframe.contentWindow)
	iframe.contentWindow.postMessage(
	{ filename, uri },
	window.location.origin,
	);
	setTimeout(() => {
	document.body.removeChild(iframe);
	}, 1000);
	}, 1000);