如何在Chrome扩展程序中获取剪贴板数据？

基本上你可以使用操纵剪贴板document.execCommand('paste|copy|cut').bHd无知

• 您需要在清单中指定"clipboardWrite"和/或"clipboardRead" 权限.bHd无知

  "clipboardRead"如果扩展程序或应用程序使用document.execCommand('paste'),则为必需.bHd无知

  "clipboardWrite"表示扩展名或应用程序使用document.execCommand('copy')或document.execCommand('cut').托管应用程序需要此权限; 它建议用于扩展和打包的应用程序.bHd无知

• 创建<input>元素(或<textarea>)bHd无知

• 把重点放在它上面bHd无知

• 呼叫 document.execCommand('paste')bHd无知

• 从<input> value属性中获取字符串.bHd无知

这对我来说可以将数据复制到剪贴板.bHd无知

---

要在Chrome扩展程序中读取剪贴板文本,您必须:bHd无知

• 请求清单中的"clipboardRead"权限bHd无知

• 创建后台脚本,因为只有后台脚本可以访问剪贴板bHd无知

• 在后台页面中创建一个元素以接受剪贴板粘贴操作.如果你把它作为textarea,你将获得纯文本,如果你使用contentEditable = true的div,你将获得Formatted HTMLbHd无知

• 如果要将剪贴板数据传递回页面脚本,则需要使用消息传递APIbHd无知

要查看所有工作的示例,请参阅我的BBCodePaste扩展:bHd无知

https://github.com/jeske/BBCodePastebHd无知

以下是如何在后台页面中读取剪贴板文本的一个示例:bHd无知

bg = chrome.extension.getBackgroundPage();        // get the background pagebg.document.body.innerHTML= "";                   // clear the background page// add a DIV, contentEditable=true, to accept the paste actionvar helperdiv = bg.document.createElement("div");document.body.appendChild(helperdiv);
helperdiv.contentEditable = true;// focus the helper div's contentvar range = document.createRange();
range.selectNode(helperdiv);window.getSelection().removeAllRanges();window.getSelection().addRange(range);
helperdiv.focus();    

// trigger the paste actionbg.document.execCommand("Paste");// read the clipboard contents from the helperdivvar clipboardContents = helperdiv.innerHTML;

bHd无知

• 在 background.js 中，您不需要获取和使用变量 bg，只需使用 document.js 即可。bHd无知

---

这是一个非常简单的解决方案。它所需要的只是让您的权限包含"clipboardRead"和"clipboardWrite". 该copyTextToClipboard函数取自这里：https ://stackoverflow.com/a/18455088/4204557bHd无知

var t = document.createElement("input");document.body.appendChild(t);
t.focus();document.execCommand("paste");var clipboardText = t.value; //this is your clipboard datacopyTextToClipboard("Hi" + clipboardText); //prepends "Hi" to the clipboard textdocument.body.removeChild(t);

请注意，document.execCommand("paste")它在 Chrome 中被禁用，并且仅适用于 Chrome 扩展程序，而不适用于网页。bHd无知

---

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

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

bHd无知

• 为什么不简单地`document.body`而不是`var body = document.getElementsByTagName('body')[0];`？bHd无知

---

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

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

---

我正在使用这个简单的函数将任何给定的明文复制到剪贴板(仅限Chrome,使用jQuery):bHd无知

// 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 examplecopyTextToClipboard('This text will be copied to the clipboard.');

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

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

bHd无知

本文为转载文章，版权归原作者所有，不代表本站立场和观点。

很赞哦！ () 赏 有话说 ()