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

Question

我正在为谷歌浏览器做一个扩展,我遇到了麻烦.

我需要在弹出窗口中单击将只读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

所有的功劳都归功于joelpt,但是如果其他人需要这个在没有jQuery的纯javascript中工作(我做过),这里是他的解决方案的改编:

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 2

我发现以下方法效果最好,因为它允许您指定复制数据的MIME类型:

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

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.');

由于快速附加 - 选择 - 复制 - 删除序列,似乎没有必要隐藏textarea或给它任何特定的CSS /属性.至少在我的机器上,即使使用非常大的文本块,Chrome也无法在删除之前将其呈现为屏幕.

请注意,这仅适用于Chrome扩展程序/应用.如果您使用的是v2 manifest.json,那么您应该在那里声明'clipboardWrite'权限; 这对于应用是强制性的,建议用于扩展.

Answer 4

该剪贴板API现在由Chrome浏览器的支持，旨在取代document.execCommand。

来自 MDN：

navigator.clipboard.writeText(text).then(() => {
    //clipboard successfully set
}, () => {
    //clipboard write failed, use fallback
});

Answer 5

您可以使用Experimental Clipboard API复制到剪贴板,但它仅在浏览器的dev分支中可用,默认情况下不启用(更多信息).