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