Копировать в буфер обмена в расширении Chrome

Question

Я делаю расширение для Google Chrome и попал в ловушку.

Мне нужно скопировать содержимое текстовой области только для чтения в буфер обмена при нажатии во всплывающем окне.Кто-нибудь знает лучший способ сделать это с чистым Javascript и без Flash?У меня также есть jQuery, загруженный в расширение, если это помогает.Мой текущий (нерабочий) код ...

function copyHTMLCB() {
$('#lb_html').select();
$('#lb_html').focus();
textRange = document.lb_html_frm.lb_html.createTextRange();
textRange.execCommand("RemoveFormat");
textRange.execCommand("Copy");
alert("HTML has been copied to your clipboard."); }

Answer 1

Я обнаружил, что следующее работает лучше всего, поскольку позволяет указать тип MIME копируемых данных:

copy: function(str, mimeType) {
  document.oncopy = function(event) {
    event.clipboardData.setData(mimeType, str);
    event.preventDefault();
  };
  document.execCommand("copy", false, null);
}

Answer 2

Вся заслуга принадлежит joelpt, но на случай, если кому-то еще понадобится это для работы в чистом javascript без jQuery (я это сделал), вот адаптация его решения:

function copyTextToClipboard(text) {
  //Create a textbox field where we can insert text to. 
  var copyFrom = document.createElement("textarea");

  //Set the text content to be the text you wished to copy.
  copyFrom.textContent = text;

  //Append the textbox field into the body as a child. 
  //"execCommand()" only works when there exists selected text, and the text is inside 
  //document.body (meaning the text is part of a valid rendered HTML element).
  document.body.appendChild(copyFrom);

  //Select all the text!
  copyFrom.select();

  //Execute command
  document.execCommand('copy');

  //(Optional) De-select the text using blur(). 
  copyFrom.blur();

  //Remove the textbox field from the document.body, so no other JavaScript nor 
  //other elements can get access to this.
  document.body.removeChild(copyFrom);
}

Answer 3

Я использую эту простую функцию для копирования любого открытого текста в буфер обмена (только в Chrome, использует jQuery):

// Copy provided text to the clipboard.
function copyTextToClipboard(text) {
    var copyFrom = $('<textarea/>');
    copyFrom.text(text);
    $('body').append(copyFrom);
    copyFrom.select();
    document.execCommand('copy');
    copyFrom.remove();
}

// Usage example
copyTextToClipboard('This text will be copied to the clipboard.');

Из-за быстрой последовательности append-select-copy-remove, кажется, нет необходимости скрывать текстовую область или присваивать ей какие-либо определенные CSS / атрибуты. По крайней мере, на моем компьютере Chrome даже не выводит его на экран до удаления, даже с очень большими кусками текста.

Обратите внимание, что будет работать только в расширении / приложении Chrome. Если вы используете v2 manifest.json, вам следует объявить там разрешение 'clipboardWrite'; это обязательно для приложений и рекомендуется для расширений.

Answer 4

Вы можете скопировать в буфер обмена, используя Experimental Clipboard API , но он доступен только в ветке разработчика и не включен по умолчанию ( больше информации ) ..

Answer 5

Вы не можете скопировать бит только для чтения, используя execCommand("Copy"), это должна быть редактируемая текстовая область. Решение состоит в том, чтобы создать элемент ввода текста и скопировать текст оттуда. К сожалению, вы не можете скрыть этот элемент, используя display: none или visibility: hidden, так как это также остановит работу команды select / copy. Однако вы можете «спрятать» его, используя отрицательные поля. Вот что я сделал во всплывающем окне Chrome Extension, которое получает короткий URL-адрес. Это фрагмент кода, который переписывает всплывающее окно с помощью shorturl (быстрый и грязный подход; -)):

document.body.innerHTML = '<p><a href="'+shortlink+'" target="_blank" >'+shortlink+'</a><form style="margin-top: -35px; margin-left: -500px;"><input type="text" id="shortlink" value="'+shortlink+'"></form></p>'
document.getElementById("shortlink").select()
document.execCommand("Copy") 

Answer 6

Я где-то читал, что в Javascript есть ограничения безопасности, которые мешают вам взаимодействовать с ОС. В прошлом у меня был хороший успех с ZeroClipboard (http://code.google.com/p/zeroclipboard/),, но он использует Flash. Веб-сайт Bitly использует его довольно эффективно: http://bit.ly/

Answer 7

У меня была похожая проблема, когда мне приходилось копировать текст из элемента, используя только javascript. Я добавлю решение этой проблемы здесь для всех, кто заинтересован. Это решение работает для многих элементов HTML, включая textarea.

HTML:

    <textarea id="text-to-copy">This is the text I want to copy</textarea>
    <span id="span-text-to-copy">This is the text I want to copy</span>

Javascript:

let textElement = document.getElementById("text-to-copy");

//remove selection of text before copying. We can also call this after copying
window.getSelection().removeAllRanges();

//create a Range object
let range = document.createRange();

//set the Range to contain a text node.
range.selectNode(textElement);

//Select the text node
window.getSelection().addRange(range);

try {
    //copy text
    document.execCommand('copy');
} catch(err) {
    console.log("Not able to copy ");
}

Обратите внимание: если вы хотите скопировать, например, элемент span, вы можете получить его текстовый узел и использовать его в качестве параметра для range.selectNode (), чтобы выделить этот текст:

let elementSpan = document.getElementById("span-text-to-copy");
let textNode = elementSpan.childNodes[0];