logo标签列表

将文本写入剪贴板

javascriptgoogle-chrome-extensionclipboard
9

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

我使用以下关键字在整个StackOverflow上进行了搜索：“[google-chrome-extension] Clipboard”

所以我想说，我已经看到了所有相关内容：

  • 添加clipboardRead和clipboardWrite权限（已完成）
  • 将文本添加到<textarea>中，调用document.execCommand('Copy');或document.execCommand("Copy", false, null);

即使我在StackOverflow的textarea上尝试了我的扩展程序，并将我的文本插入到StackOverflow textarea的wmd-input部分中，然后选择它，然后调用复制。什么也没有发生...

尝试了所有方法，请指教...我错过了什么？

4个回答
11

基于https://dev59.com/XXA75IYBdhLWcg3wK1wp#12693636。

function directCopy(str){
    //based on https://dev59.com/XXA75IYBdhLWcg3wK1wp#12693636
        document.oncopy = function(event) {
    event.clipboardData.setData("Text", str);
    event.preventDefault();
        };
    document.execCommand("Copy");
        document.oncopy = undefined;
}
5
您可以尝试以下代码，它可以将文本写入剪贴板。
例如，我将“样例”写入了剪贴板。
输出：
图像描述
manifest.json:
manifest文件是所有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
}

弹出窗口.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;
});
谢谢Sudarshan，它在弹出窗口上起作用了，但我已经有一个变量（输出）来自内容脚本，我想将该文本复制到剪贴板中，我该怎么做？ - David Brisker
@DavidBrisker：如果您可以编辑您的问题并提供出现问题的代码，那么我就能更好地理解问题所在。您能否通过编辑您的问题来放置相关代码？我会从那里开始处理。 - Sudarshan
代码有点复杂，但是假设这样：我想要一个键盘事件监听器，当用户点击例如Alt + 9时，将变量数据（通过alert或console.log看到）复制到剪贴板。挂钩键盘事件只能在内容脚本中实现，而不是后台脚本（据我所知），将文本复制到剪贴板只能通过后台脚本实现（据我所知），我该如何处理？ - David Brisker
“只有在内容脚本中才能挂钩键盘事件（据我所知），而无法在后台脚本中实现。”内容脚本的键盘监听器在内容脚本中被挂钩，而后台脚本的键盘监听器则在后台脚本中被挂钩。 “复制文本到剪贴板只能通过后台脚本实现（据我所知）”，这也可以在内容脚本中实现。你尝试过在你的内容脚本中使用 document.execCommand("Copy", false, null); 吗？ - Sudarshan
1
好的，你也可以尝试这种方法 var texttobecopied = $('#someid').val(str).select(); document.execCommand('copy'); 从内容脚本中复制，但我没有测试过 :)..通过另一种方法进行编辑 - Sudarshan
显示剩余3条评论
2

使用示例：

复制字符串到剪贴板("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);
    }
1

听起来您正在尝试从内容脚本中复制。在joelpt和Jeff Gran的答案基础上，结合this 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});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接