Взаимодействие с буфером обмена

В этом разделе описаны варианты записи данных в буфер обмена.

API буфера обмена записывает произвольные данные в буфер обмена из вашего расширения. Для использования API необходимо разрешение "clipboardRead" или "clipboardWrite" в вашем файле manifest.json. Поскольку API доступен только в безопасных контекстах, его нельзя использовать из скрипта содержимого, работающего на страницах http:, только на страницах https:.

Для скриптов страниц разрешение "clipboard-write" необходимо запросить, используя Web API navigator.permissions. Вы можете проверить это разрешение, используя navigator.permissions.query():

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

Эта функция принимает строку и записывает её в буфер обмена:

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

Команды "cut" и "copy" метода document.execCommand() используются для замены содержимого буфера обмена выбранным материалом. Эти команды могут использоваться без каких-либо специальных разрешений в кратковременных обработчиках событий для действия пользователя (например, обработчике нажатия).

Например, предположим, что у вас есть всплывающее окно, которое включает в себя следующий HTML:

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

Чтобы кнопка "copy" копировала содержимое элемента <input>, вы можете использовать такой код:

function copy() {
  let copyText = document.querySelector("#input");
  copyText.select();
  document.execCommand("copy");
}

document.querySelector("#copy").addEventListener("click", copy);

Поскольку вызов execCommand() находится внутри обработчика события нажатия, вам не нужны специальные разрешения.

Однако, предположим, что вы запускаете копирование из оповещения:

function copy() {
  let copyText = document.querySelector("#input");
  copyText.select();
  document.execCommand("copy");
}

browser.alarms.create({
  delayInMinutes: 0.1
});

browser.alarms.onAlarm.addListener(copy);

В зависимости от браузера, это может не сработать. В Firefox это не сработает, и вы увидите такое сообщение в консоли:

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

Для активации этого случая использования вам нужно запросить разрешение "clipboardWrite" разрешения. Таким образом: "clipboardWrite" позволяет вам записывать в буфер обмена вне кратковременного обработчика события для действия пользователя.

Буфер обмена и другие используемые здесь API быстро развиваются, поэтому поведение в разных браузерах может отличаться.

В Chrome:

• Вам не нужно "clipboardWrite", даже для записи в буфер обмена вне обработчика события, вызванного действием пользователя.

В Firefox:

• navigator.clipboard.write() не поддерживается.

См. таблицы совместимости с браузерами для получения дополнительной информации.

В этом разделе описаны варианты чтения или вставки данных из буфера обмена.

Методы navigator.clipboard.readText() и navigator.clipboard.read() API буфера обмена позволяют читать произвольные текстовые или двоичные данные из буфера обмена в безопасных контекстах. Это позволяет получить доступ к данным в буфере обмена без их вставки в редактируемый элемент.

После получения разрешения "clipboard-read" от API разрешений, вы можете легко читать из буфера обмена. Например, этот фрагмент кода извлекает текст из буфера обмена и заменяет содержимое элемента с идентификатором "outbox" этим текстом.

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

Для использования document.execCommand("paste") ваше расширение требует разрешение "clipboardRead" разрешения. Это имеет место даже если вы используете команду "paste" из обработчика события, инициированного пользователем, такого как click или keypress.

Рассмотрим HTML, который включает что-то вроде этого:

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

Чтобы установить содержимое элемента <textarea> с идентификатором "output" из буфера обмена при нажатии на кнопку "paste" <button>, вы можете использовать такой код:

function paste() {
  let pasteText = document.querySelector("#output");
  pasteText.focus();
  document.execCommand("paste");
  console.log(pasteText.textContent);
}

document.querySelector("#paste").addEventListener("click", paste);

Firefox поддерживает разрешение "clipboardRead" разрешения начиная с версии 54, но поддерживает вставку только в элементы в режиме редактирования содержимого, который для скриптов содержимого работает только с <textarea>. Для фоновых скриптов любой элемент можно установить в режим редактирования содержимого.

• Clipboard API
• Permissions API
• Редактирование содержимого