Copiar al portapapeles en la extensión de Chrome

Question

Estoy haciendo una extensión para Google Chrome y me he encontrado con un problema.

Necesito copiar el contenido de un solo texto de texto al portapapeles al hacer clic en la ventana emergente. ¿Alguien sabe la mejor manera de hacerlo con Javascript puro y sin Flash? También he cargado jQuery en la extensión, si eso ayuda. Mi código actual (no de trabajo) es ...

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

se puede copiar al portapapeles utilizando Experimental Clipboard API, pero sólo está disponible en la rama dev de un navegador y no activado por defecto (more info) ..

Answer 2

leí en alguna parte que hay restricciones de seguridad con Javascript que hace que deje de interactuar con el sistema operativo. He tenido éxito con ZeroClipboard en el pasado (http://code.google.com/p/zeroclipboard/), pero usa Flash. La página web Bitly lo utiliza con bastante eficacia: http://bit.ly/

Answer 3

Puede' t copia un bit de solo lectura usando execCommand("Copy"), tiene que ser un área de texto editable. La solución es crear un elemento de entrada de texto y copiar el texto desde allí. Lamentablemente, no puede ocultar ese elemento utilizando display: none o visibility: hidden ya que eso también detendrá el funcionamiento del comando de selección/copia. Sin embargo, puedes "ocultarlo" usando márgenes negativos. Esto es lo que hice en una ventana emergente de Chrome Extension que obtiene una url corta. Esta es la parte del código que reescribe la ventana emergente con el SHORTURL (enfoque rápido y sucio ;-)):

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 4

estoy usando esta función simple copiar cualquier texto plano dado en el portapapeles (cromo solamente, utiliza 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.'); 

Debido a la secuencia de datos anexados-select-copia-remove rápido, que no parece ser necesario para ocultar el área de texto o darle cualquier CSS/atributos particulares. Al menos en mi máquina, Chrome ni siquiera lo renderiza en la pantalla antes de que se elimine, incluso con trozos de texto muy grandes.

Tenga en cuenta que esto solo funcionan dentro de una extensión/aplicación de Chrome. Si está utilizando v2 manifest.json, debe declarar allí el permiso 'clipboardWrite'; esto es obligatorio para las aplicaciones y recomendado para extensiones.

Answer 5

He encontrado que la siguiente funciona mejor, ya que le permite especificar el tipo MIME de los datos copiados:

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

Answer 6

todo el crédito va a joelpt, pero en caso de que alguien más tiene que esto funcione en javascript puro sin jQuery (Lo hice), aquí hay una adaptación de su solución:

function copyTextToClipboard(text) { 
    var copyFrom = document.createElement("textarea"); 
    copyFrom.textContent = text; 
    var body = document.getElementsByTagName('body')[0]; 
    body.appendChild(copyFrom); 
    copyFrom.select(); 
    document.execCommand('copy'); 
    body.removeChild(copyFrom); 
}