Мне сложно найти последнюю информацию о том, как добавить слушателя для "Ctrl + C", извлечь данные буфера обмена, а затем вернуться в буфер обмена в Chrome Extension. Весь старый код, который я нашел, для старых версий, которые теперь устарели.
Как получить данные буфера обмена в Chrome Extension?
Ответ 1
По сути, вы можете манипулировать буфером обмена, используя document.execCommand('paste|copy|cut')
.
-
Вам нужно будет указать разрешения
"clipboardWrite"
и/или"clipboardRead"
в манифесте."clipboardRead" Требуется, если расширение или приложение использует document.execCommand('paste').
"clipboardWrite" Указывает, что расширение или приложение использует document.execCommand('copy') или document.execCommand('cut'). Это разрешение требуется для размещенных приложений; рекомендуется для расширений и упакованных приложений.
-
Создать элемент
<input>
(или<textarea>
) - Сфокусируйтесь на этом
- Вызовите
document.execCommand('paste')
- Захватите строку из атрибута
value
<input>
.
Это помогло мне скопировать данные в буфер обмена.
Ответ 2
Чтобы прочитать текст буфера обмена в расширении Chrome, вам необходимо:
- запросите разрешение "clipboardRead" в вашем манифесте
- создайте фоновый скрипт, так как только фоновый скрипт может получить доступ к буферу обмена
- создайте элемент на фоновой странице, чтобы принять действие вставки в буфер обмена. Если вы сделаете это текстовой областью, вы получите простой текст, если вы сделаете это div с contentEditable = true, вы получите форматированный HTML
- если вы хотите передать данные буфера обмена обратно в сценарий на странице, вам нужно использовать API для передачи сообщений
Чтобы увидеть пример того, как все это работает, смотрите мое расширение BBCodePaste:
https://github.com/jeske/BBCodePaste
Вот один пример того, как читать текст буфера обмена на фоновой странице:
bg = chrome.extension.getBackgroundPage(); // get the background page
bg.document.body.innerHTML= ""; // clear the background page
// add a DIV, contentEditable=true, to accept the paste action
var helperdiv = bg.document.createElement("div");
document.body.appendChild(helperdiv);
helperdiv.contentEditable = true;
// focus the helper div content
var range = document.createRange();
range.selectNode(helperdiv);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
helperdiv.focus();
// trigger the paste action
bg.document.execCommand("Paste");
// read the clipboard contents from the helperdiv
var clipboardContents = helperdiv.innerHTML;
Ответ 3
Вот очень простое решение. Все, что для этого требуется, - это чтобы ваши разрешения включали "clipboardRead"
и "clipboardWrite"
. Функция copyTextToClipboard
взята отсюда: fooobar.com/questions/173053/...
var t = document.createElement("input");
document.body.appendChild(t);
t.focus();
document.execCommand("paste");
var clipboardText = t.value; //this is your clipboard data
copyTextToClipboard("Hi" + clipboardText); //prepends "Hi" to the clipboard text
document.body.removeChild(t);
Не то, чтобы document.execCommand("paste")
отключен в Chrome и будет работать только в расширении Chrome, а не на веб-странице.
Ответ 4
Лучшие рабочие примеры, которые я нашел, здесь
function getClipboard() {
var result = null;
var textarea = document.getElementById('ta');
textarea.value = '';
textarea.select();
if (document.execCommand('paste')) {
result = textarea.value;
} else {
console.error('failed to get clipboard content');
}
textarea.value = '';
return result;
}