Предполагается использование нового Clipboard API.
С помощью него, копирование в буфер выполняется методом navigator.clipboard.writeText()
, который принимает аргументом строковое значение - тот текст, который нужно скопировать.
В качестве результата возвращается Promise
- то есть, выполнение асинхронное... но с другой стороны, можно удобно ловить ошибки. Да и async
+await
никто не отменял ;)
При вызове метода из popup'а в расширении Chrome, не требуется каких-либо дополнительных разрешений.
В расширениях Firefox они так же необязательны, но есть условие что вызов метода должен выполняться в коллбэке обработчика события, инициированного пользователем (например, в обработчике клика).
Я проверял в расширении в режиме разработчика Chrome v77, все работает исправно.
Пример, повторяющий тестовое расширение:
/* popup.js */
document.addEventListener('DOMContentLoaded', () => {
const inputEl = document.querySelector('input');
document.querySelector('button').addEventListener('click', () => {
navigator.clipboard.writeText(inputEl.value)
.then(() => { setStatus('Скопировано!'); })
.catch(setStatus);
});
});
function setStatus(data) { // эта функция только для показа результата
const statusEl = document.querySelector('p');
if (data instanceof Error) {
statusEl.textContent = data.message;
statusEl.style.color = '#e00';
} else {
statusEl.textContent = data;
statusEl.style.color = '#0c0';
setTimeout(() => setStatus(''), 2e3);
}
}
/* popup.html > html > head > style */
body { font-family: sans-serif; }
body > * { font-size: 1rem; }
div, p { margin: 1rem 0 0 0; padding: 0.5rem 0 0 0; border-top: 1px solid #eee; }
textarea { display: block; width: 90%; }
<!-- popup.html > html > body -->
<input value="Lorem ipsum">
<button>Скопировать в буфер обмена</button>
<div>Сюда можно вставить текст (для проверки):</div>
<textarea></textarea>
<p></p>
Манифест тестового расширения:
{
"name": "Test extension",
"description": "Test extension",
"version": "0.0.1",
"manifest_version": 2,
"browser_action": {
"default_popup": "popup.html"
}
}
При использовании на веб-странице (то есть, не в расширении), нужно учесть три момента:
по-видимому, Clipboard API работает только если страница загружена через HTTPS
некоторые браузеры могут требовать запрос разрешений через Permissions API
Clipboard API экспериментальный, а значит он не поддерживается старыми/отстающими браузерами, и (на данный момент) поддержка отсутствует в Android WebView (а в Chrome для Android - она есть)
Страница на MDN: https://wiki.developer.mozilla.org/en-US/docs/Web/API/Clipboard