Как получить данные буфера обмена в Chrome Extension?

Мне сложно найти последнюю информацию о том, как добавить слушателя для "Ctrl + C", извлечь данные буфера обмена, а затем вернуться в буфер обмена в 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;
}