将文本写入剪贴板

时间:2012-12-16 06:59:59

标签: javascript google-chrome-extension clipboard

我想通过Chrome扩展程序将一些文本变量写入剪贴板,当用户按下快捷键时会发生这种情况。除了写到剪贴板之外,我已经完成了所有部分。

我使用以下关键字搜索了整个StackOverflow: “[google-chrome-extension]剪贴板”

所以我想说,我已经看到所有相关的内容:

  • 添加clipboardReadclipboardWrite权限(已完成)
  • 将文字添加到<textarea>,然后致电 document.execCommand('Copy'); 要么 document.execCommand("Copy", false, null);

即使我在StackOverflow的textarea上尝试了我的扩展,我将我的文本插入到StackOverflow textarea的wmd-input部分,然后选择它,然后调用copy。没什么,什么也没有......

一切都在尝试。请指教......我错过了什么?

4 个答案:

答案 0 :(得分:10)

基于https://stackoverflow.com/a/12693636

function directCopy(str){
    //based on https://stackoverflow.com/a/12693636
        document.oncopy = function(event) {
    event.clipboardData.setData("Text", str);
    event.preventDefault();
        };
    document.execCommand("Copy");
        document.oncopy = undefined;
}

答案 1 :(得分:5)

您可以尝试以下代码,将文本写入剪贴板

作为一个例子,我写了Sample到剪贴板

输出

enter image description here

<强> 的manifest.json

清单文件是所有Chrome扩展程序的关键,确保它具有所有权限

 {
  "name": "Copy to ClipBoard Demo",
  "description" : "This is used for demonstrating Copy to Clip Board Functionality",
  "version": "1",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions":["clipboardWrite"],
    "manifest_version": 2
}

<强> popup.html

一个简单的浏览器操作HTML文件,带有输入框和按钮

<html>

    <head>
        <script src="popup.js"></script>
    </head>

    <body>
        <input type="text" id="text" placeHolder="Enter Text To Copy"></input>
        <button id="copy">Copy</button>
    </body>

</html>

<强> popup.js

它将<input>中的内容复制到剪贴板

function copy() {

    //Get Input Element
    var copyDiv = document.getElementById('text');

    //Give the text element focus
    copyDiv.focus();

    //Select all content
    document.execCommand('SelectAll');

    //Copy Content
    document.execCommand("Copy", false, null);
}

//Add Event Listeners to Button Click
document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("copy").onclick = copy;
});

OR

function copy(){

    //Get Input Element
    document.getElementById("text").select();

    //Copy Content
    document.execCommand("Copy", false, null);
}

//Add Event Listeners to Button Click
document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("copy").onclick = copy;
});

答案 2 :(得分:1)

Suonds就像你试图从内容脚本中复制一样。从joelpt建立Jeff Granthis answer的答案,以下是如何从内容脚本中复制任何文本:

"permissions": [
    "clipboardWrite",...

在main.js或任何后台脚本中:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
  var copyFrom = document.createElement("textarea");
  copyFrom.textContent = request.text;
  var body = document.getElementsByTagName('body')[0];
  body.appendChild(copyFrom);
  copyFrom.select();
  document.execCommand('copy');
  body.removeChild(copyFrom);
})

从您的内容脚本:

chrome.runtime.sendMessage({text:textToCopy});

答案 3 :(得分:1)

用法示例:

copyStringToClipboard(“ abc123”);

    function copyStringToClipboard (str) {
      // Create new element
      var el = document.createElement('textarea');
      // Set value (string to be copied)
      el.value = str;
      // Set non-editable to avoid focus and move outside of view
      el.setAttribute('readonly', '');
      el.style = {position: 'absolute', left: '-9999px'};
      document.body.appendChild(el);
      // Select text inside element
      el.select();
      // Copy text to clipboard
      document.execCommand('copy');
      // Remove temporary element
      document.body.removeChild(el);
    }