Write text to Clipboard

Question

I want to write some text variable into clipboard via Chrome Extension, it will be happened when user presses a short-key. I've done all parts except writing to clipboard.

I've searched entire StackOverflow using these keywords: "[google-chrome-extension] Clipboard"

So I want to say, I've seen all related to:

Add clipboardRead and clipboardWrite permission (already done)
Add text into a <textarea>, call document.execCommand('Copy'); or document.execCommand("Copy", false, null);

Even I tried my extension on StackOverflow's textarea and I inserted my text into wmd-input part of StackOverflow textarea, then selected it, then called copy. Nothing, nothing, nothing...

Everything tried. Please advise... What am I missing?

score 11 · Answer 1 · edited May 23 '17 at 12:16

11

Based on 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;
}

edited May 23 '17 at 12:16

Community

1
1

answered Aug 15 '13 at 17:27

Instantiation

303
2
7

Sudarshan · Accepted Answer · 2012-12-16T08:02:30.763

5

You can try the following code, it writes text to clipboard

As an example i wrote Sample to clipboard

Output

enter image description here

manifest.json

manifest file is key for all chrome extensions, ensured it is with all permissions

 {
  "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

A trivial Browser action HTML File, with input box and button

<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

It copies content in <input> to clipboard

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

edited Dec 16 '12 at 08:02

answered Dec 16 '12 at 07:15

Sudarshan

18,140
7
53
61

Thanks Sudarshan, it worked on Popup, but I already have a variable (output) from content script which I want to copy that text to clipbaord, how I should do that? – David Brisker Dec 16 '12 at 07:23
@DavidBrisker: You mean to say, you have content to be copied is in content scripts variable? – Sudarshan Dec 16 '12 at 07:28
I copied your work in background js and it worked well. But in background page I cannot receive keyboard event. I want copying happen when user presses a keyboard shortcut – David Brisker Dec 16 '12 at 07:31
@DavidBrisker: If you can edit your question with code which is not working, it can help me better to understand problem, can you please put your relevant code by editing your question? I can pick it up from there – Sudarshan Dec 16 '12 at 07:33
Code is a little complicated, but assume this: I want to have a key event listener which when user clicked for example Alt + 9, copy a variable data (which I see via alert or console.log) to clipboard. Hooking keyboard event only achievable in content script not background script (as far as I know) and copying text to clipboard achievable only via background script (as far as I know), how can I handle it? – David Brisker Dec 16 '12 at 07:37
`Hooking keyboard event only achievable in content script not background script (as far as I know)` content script key board listeners are hooked in content script and background script keyboard listeners are hooked in background script;`copying text to clipboard achievable only via background script (as far as I know),` it is also possible in content script, have you tried `document.execCommand("Copy", false, null);` in your content script? – Sudarshan Dec 16 '12 at 07:41
Thats sudarshan, using sendmessage, sent message from content to background and background copied it to clipboard. :) Thanks – David Brisker Dec 16 '12 at 07:56
1

Ok, you can also try this approach `var texttobecopied = $('#someid').val(str).select(); document.execCommand('copy');` to copy from content script(s), but i did not test it :)..Edited by answer with another approach – Sudarshan Dec 16 '12 at 07:58

score 2 · Answer 3 · answered Dec 14 '18 at 16:35

Usage example:

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

score 1 · Answer 4 · edited May 23 '17 at 11:45

Suonds like you're trying to copy from a content script. Building off joelpt and Jeff Gran's answers from this answer, here's how to copy any piece of text from a content script:

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

In your main.js or any background script:

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

From your content script:

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

Write text to Clipboard

4 Answers4

Output

manifest.json

popup.html

popup.js

OR