Interact with the clipboard

Writing to the clipboard

The Clipboard API write methods navigator.clipboard.readText() and navigator.clipboard.writeText() write arbitrary content to the clipboard. The methods are available from a secure context after the extension's user has performed transient activation. However, with the "clipboardWrite" permission the methods are available without transient activation.

This function takes a string and writes it to the clipboard:

function updateClipboard(newClip) {
  navigator.clipboard.writeText(newClip).then(
    () => {
      /* clipboard successfully set */
    },
    () => {
      /* clipboard write failed */
    },
  );
}

Reading from the clipboard

The navigator.clipboard.readText() and navigator.clipboard.read() methods let extensions read arbitrary text or binary data from the clipboard. These methods let extensions access the data in the clipboard without pasting it into an editable element.

The methods are available from a secure context after the extension's user has performed transient activation and clicked a paste prompt in an ephemeral context menu. However, with the "clipboardRead" permission` permission, your extension can read from the clipboard without user confirmation or transient activation.

This snippet of code fetches the text from the clipboard and replaces the contents of the element with the ID "outbox" with that text.

navigator.clipboard
  .readText()
  .then((clipText) => (document.getElementById("outbox").innerText = clipText));

Browser-specific considerations

In Chrome:

• Chrome doesn't expose navigator.clipboard to extension service workers, and offscreen documents can't access navigator.clipboard due to the API's document focus requirements. As a result, Chrome extensions have to use the deprecated document.execCommand() APIs in an offscreen document or use navigator.clipboad in a different context, such as a content script or extension page.

• For page scripts, the "clipboard-write" permission needs to be requested using the Web API navigator.permissions. You can check for that permission using navigator.permissions.query():

  js

  navigator.permissions.query({ name: "clipboard-write" }).then((result) => {
    if (result.state === "granted" || result.state === "prompt") {
      /* write to the clipboard now */
    }
  });
  

  Note: The clipboard-write permission name is not supported in Firefox or Safari.

In Firefox:

• The availability of the Clipboard API read methods on the user's response to a paste prompt became available in Firefox 127. Prior to that, the methods were only available when the "clipboardRead" permission was set.

Browser compatibility

api.Clipboard

webextensions.api.clipboard

See also

• Clipboard API
• Permissions API
• Make content editable