Search code examples
javascriptsafariwebkitclipboard

Safari clipboard permissions checking

I have the following code that works in Chrome:

navigator.permissions
    .query({ name: "clipboard-write" })
    .then((result) => {
        if (result.state === "granted" || result.state === "prompt") {
            navigator.clipboard.writeText(data.payload).then(console.log).catch(console.error);
        }
    })
    .catch((err) => {
        console.log("ToSystemClipboard", err);
    });

But in Safari it hits the catch with TypeError: Type error.

In Webstorm I get an underlining of { name: "clipboard-write" } to the effect that clipboard-write is not a recognised keyword. And yet on https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/read clipboard-read is used in an example - I can't recall where I found clipboard-write.

If I remove the permissions test, my code - navigator.clipboard.writeText - works in Safari anyway, but that doesn't feel like the safest code to write for production. Am I missing something?

I have since found that "[t]he clipboard-write permission is granted automatically to pages when they are the active tab". This explains why my code works without the permissions check, but does not answer my question about syntax to use

Solution

  • clipboard-read and clipboard-write are unavailable to Firefox or Safari via the navigator.permissions.query function.

    However you can access Safari's clipboard via navigator.clipboard instead.

    You'll find that only the more recent versions of Safari supports query so make sure you check for availability: navigator.permissions && navigator.permissions.query({ ...