navigator.clipboard.writeText fails in Safari

After further investigation it appears that navigator.clipboard.writeText will work in some code called from an extensions popup menu item.

By a process of elimination it appears that what causes it to fail is if the function called by clicking the menu item calls any code that has been loaded from a module.

So if all the code is in .js files loaded by popup.html it works. But in my case I load some code from an .mjs file which generates the citation. I structure it this way so that I can use a node.js test suite for my unit tests. Since my extension code is very modular and consists of many .mjs files it would be a big job to restructure it so all of the code could be included in popup.html as .js files. Structuring it this way also improves the performance of bringing up the popup menu - it doesn't need to load all of the code that will be used by all of the menu items.

It is possible that it is not just the fact that I'm calling code from a module. It could be something specific that I am doing in that module. I haven't gone through the process of creating a dummy module that does very little to confirm.

So for the Safari version I have a fallback. If the call to navigator.clipboard.writeText throws an exception I then change my popup to display the generated text with a button "Save to clipboard". Then when the user presses that button navigator.clipboard.writeText works.

Hey there! I have been facing a similar issue in my job, but I figured out a working solution (I had to dig a LOT to find it).

The main issue is that Apple's Clipboard API expects a Promise when writing something to the clipboard. writeText takes just a string. I wish writeText worked for me since it would make the component logic a lot cleaner, but I managed to get to get this logic working using write

Here is my fix:

const clipboardItem = new ClipboardItem({
    'text/plain': someAsyncMethod().then((result) => {

    /**
     * We have to return an empty string to the clipboard if something bad happens, otherwise the
     * return type for the ClipBoardItem is incorrect.
     */
    if (!result) {
        return new Promise(async (resolve) => {
            resolve(new Blob[``]())
        })
    }

    const copyText = `some string`
        return new Promise(async (resolve) => {
            resolve(new Blob([copyText]))
        })
    }),
})
// Now, we can write to the clipboard in Safari
navigator.clipboard.write([clipboardItem])

I adapted this code a bit from the actual business logic since it wouldn't make sense without context. But basically, to get get the Clipboard API working, you need to:

1. Create a new ClipboardItem instance
2. The ClipboardItem can have "regular" logic in the method body (do whatever you need to here)
3. IMPORTANT PART: the method body for the new ClipboardItem should return a new Promise that contains resolve(new Blob([<DATA_TO_COPY>])