在Chrome扩展程序中复制到剪贴板

Question

我对Google Chrome进行了扩展，并且遇到了麻烦。

我需要复制一个只读的textarea的内容到剪贴板上点击弹出。有没有人知道最好的方式去纯粹的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

您可以复制使用Experimental Clipboard API到剪贴板，但它只是在浏览器的Dev分支，而不会提供默认（more info）启用..

Answer 2

我读过的地方，有JavaScript的安全限制，阻止你与操作系统交互。我以前在ZeroClipboard上取得了很大的成功（http://code.google.com/p/zeroclipboard/），但它确实使用了Flash。该Bitly网站非常有效地使用它：http://bit.ly/

Answer 3

你可以用” t使用execCommand("Copy")复制文本的只读位，它必须是可编辑的文本区域。解决方案是创建一个文本输入元素并从那里复制文本。不幸的是，您不能使用display: none或visibility: hidden隐藏该元素，因为这也会停止select/copy命令的工作。但是，您可以使用负边距“隐藏”它。以下是我在Chrome扩展程序弹出窗口中获得的简短网址。与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 4

我使用这个简单的功能，任何给定的明文复制到剪贴板（只有浏览器，用了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.'); 

由于快速追加选 - 复制 - 删除序列，它似乎没有必要隐藏的textarea或者给它任何特别的CSS /属性。至少在我的机器上，甚至在文字非常大的情况下，Chrome甚至在删除它之前都不会将其渲染到屏幕上。

请注意，这将只有在Chrome扩展/应用程序内工作。如果您使用的是v2 manifest.json，您应该在那里声明'clipboardWrite'权限;这对于应用程序是强制性的，并推荐用于扩展。

Answer 5

我发现下面的效果最好，因为它允许您指定的MIME类型为复制的数据：

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

Answer 6

一切归功于joelpt，但如果任何人需要这在纯JavaScript工作，而jQuery的（我做了），这是他的解决方案的改编：

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); 
}