Navigator Clipboard API

Support of Async clipboard APIs in major browsers

Photo by Monstera from Pexels

The clipboard is a space to store data temporarily. These API’s are used to develop cut, copy and paste functionalities in apps. Navigator Clipboard browser API’s are used to write various data to the clipboard and also read the clipboard data. These are natively available in all major browsers (Chrome, Safari and Firefox) with different levels of support.

Navigator Clipboard APIs

• navigator.clipboard.writeText
• navigator.clipboard.write
• navigator.clipboard.readText
• navigator.clipboard.read

Supported Mime Types

Mime type defines the type of the data. These are specified while writing and reading clipboard to indicate the kind of data. These are commonly supported MimeTypes .

1. text/plain, Text format , Supported in all browsers
2. text/html, HTML format, Supported in all browsers
3. image/png, Graphics format, Supported in all browsers
4. text/uri-list, List of Urls, Supported only in Safari.
5. “web text/*”, Web custom format, Supported only in Chrome
6. “web application/*”, Web custom type , Supported only in Chrome

navigator.clipboard.writeText

Supported Browsers

All major browsers ( Chrome, Firefox & Safari)

Use cases

Copy to Clipboard button.

https://codepen.io/rohinikumar4073/pen/yLXMmpP?editors=1111

navigator.clipboard.writeText

navigator.clipboard.write

Supported Browsers

1. Chrome and Safari.
2. Firefox supports from version 126. Before the version it supports by setting asyncClipboard flags to true. These configs are will be available by browsing about:config.

Use cases

1. Context Menu Copy
2. Writing images to clipboard

Description

ClipboardItems array is passed as argument to the clipboard.write. Blobs are used to create clipboard items.

Errors encountered

Safari

The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

This can happen for multiple issues.

1. Clipboard write happening after transient activation. If there is a delay in user action and writing to clipboard by more than 1 sec. ( Safari supports returning Promise and resolving blobs for clipboard items to avoid this issue).

Chrome

Document is not focused

This error happens in Chrome when there is delay in writing to clipboard and user is not focusing on the window.

Chrome, Firefox

Type {mimeType} not supported on write

This error happens in Chrome when the mimeType that is written is not text, html or image.

https://codepen.io/rohinikumar4073/pen/xxrdxxR

Safari also supports the creating of the clipboardItem using promises for blobs. This is helpful in cases when the data to be written has to be fetched from server.

Safari Promise return for ClipboardItem blobs

navigator.clipboard.readText and navigator.clipboard.read

Supported Browsers

1. Chrome, Safari
2. Firefox supports from version 126. Before the version it supports by setting asyncClipboard flags to true. These configs are will be available by browsing about:config.

navigator.clipboard.readText

navigator.clipboard.read

Errors

Chrome

Read permission denied

On navigator.clipboard.read there is a prompt to allow Clipboard access. This error comes if the user clicks on block clipboard access when the prompt shows up.

No valid data on clipboard.

This error shows up when there is no text, html or images in clipboard and contains some other data types or empty clipboard.

Safari

The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission

1. On navigator.clipboard.read if the clipboard data is not from the same browser button, there is an extra paste button shown in Safari. If this is not clicked this error is thrown.
2. This will be shown when there we tried to call navigator.clipboard.read in events like context menu.