I’m developing a Tampermonkey userscript to capture audio from a webpage using the MediaRecorder API. The script successfully records audio and creates a Blob with the MIME type audio/webm;codecs=opus. However, when I attempt to download the generated audio file, it’s saved with a .bin extension and a random 9-digit filename (e.g. 1298453815.bin) instead of the intended recording.webm.

This is the relevant code snippet.

// Media recorder handling above
const audioBlob = new Blob(audioChunks, { type: 'audio/webm;codecs=opus' });
const audioUrl = URL.createObjectURL(audioBlob);

const link = document.createElement('a');
link.href = audioUrl;
link.download = 'recording.webm';
link.click();

I’ve tried various methods to enforce the correct filename and extension, including explicitly setting the download attribute of the anchor tag and setting the type attribute. Trying GM_download on blob URL, using FileReader to convert the blob to a data URL. I’ve also tested with simple text files created from blobs, and the issue persists. I also inspected the network tab and it shows that the request headers are set with the correct MIME types.

Crucially, I know this is possible and not a browser limitation due to the fact that this site https://editor.audio/ uses blobs for export and the “Save as” window appears with the correct filename and extension.

Could anyone clarify what I’m missing? Is there a proper way to ensure that the downloaded file has the correct filename and extension when using blobs in a Tampermonkey userscript? I’m particularly interested in understanding why the download attribute and GM_download are not working as expected in this context, and how the website I linked manages to achieve the desired behavior.