Interact with the clipboard

Extensions built using WebExtension APIs can interact with the system clipboard using document.execCommand():

• document.execCommand("copy")
• document.execCommand("cut")
• document.execCommand("paste")

Writing to the clipboard

You can use the "cut" and "copy" commands without any special permission if you are using them in a short-lived event handler for a user action (for example, a click handler).

For example, suppose you've got a popup that includes the following HTML:

<input id="input" type="text"/>
<button id="copy">Copy</button>

To make the "copy" button copy the contents of "input", you can use code like this:

function copy() {
  var copyText = document.querySelector("#input");
  copyText.select();
  document.execCommand("Copy");
}
document.querySelector("#copy").addEventListener("click", copy);

Because the execCommand() call is inside a click event handler, you don't need any special permissions here.

However, let's say that instead, you trigger the copy from an alarm:

function copy() {
  var copyText = document.querySelector("#input");
  copyText.select();
  document.execCommand("Copy");
}
browser.alarms.create({
  delayInMinutes: 0.1
});
browser.alarms.onAlarm.addListener(copy);

Depending on the browser, this may not work. On Firefox, it will not work, and you'll see a message like this in your console:

"document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler."

To enable this use case, you need to ask for the "clipboardWrite" permission. So: "clipboardWrite" enables you to write to the clipboard outside a short-lived event handler for a user action.

Browser-specific considerations

In Chrome:

• you can write to the clipboard like this in all execution contexts - background pages, content scripts, options pages, and popups.
• you don't actually need "clipboardWrite", even to write to the clipboard outside a user-generated event handler.

In Firefox:

• you can write to the clipboard like this in all execution contexts except background pages. In Firefox you can't select text or focus an input field in background pages, so you can't write to the clipboard from a background page.
• the "clipboardWrite" permission is only supported from version 51 onwards.

Reading from the clipboard

To use the "paste" command, you must have the "clipboardRead" permission. For example, suppose your HTML includes something like this:

<textarea id="output"></textarea>
<button id="paste">Paste</button>

To set the content of "output" from the clipboard when the user clicks "paste", you can use code like this:

function paste() {
  var pasteText = document.querySelector("#output");
  pasteText.focus();
  document.execCommand("Paste");
  console.log(pasteText.textContent);
}
document.querySelector("#paste").addEventListener("click", paste);

This will require "clipboardRead", even though it's in a user-generated event handler.

Browser-specific considerations

Firefox supports the "clipboardRead" permission from version 54, but does require an element in content editable mode, which for content scripts only works with a <textarea>. For background scripts, any element can be set to content editable mode.