the proper use of execcommand("paste") in a chrome extension

Question

I'm trying to paste clipboard data into a textarea using execcommand("paste") with a chome extension, but i cannot seem to get it to work. permissions are set. I have tried to set focus() on the textarea, but document.execCommand("paste") does nothing, and I get no error. calling execcommand("paste") from background page also does nothing.

<form>
     <textarea id="ta"></textarea>    
</form>
<script type="text/javascript">
    document.findElemetById("ta").focus();
    document.execCommand("paste");
</script>

Small observation, but did you mean `document.getElementById` as `document.findElementById` doesn't exist? I'm sure this isn't the problem with your real code as this would definitely cause an error. — neocotic, Aug 22 '11 at 11:50
Also see this question: http://stackoverflow.com/questions/6969403/cant-get-execcommandpaste-to-work-in-chrome/7100464#7100464 — Boris Smus, Aug 22 '11 at 15:23

neocotic · Accepted Answer · 2014-04-17T10:59:58.600

46

Clipboard functionality is a key part of my extension so I've seen all the normal problems. On my background page I expose a copy and a paste function and the page itself contains <textarea id="sandbox"></textarea>;

function copy(str) {
    var sandbox = $('#sandbox').val(str).select();
    document.execCommand('copy');
    sandbox.val('');
}

function paste() {
    var result = '',
        sandbox = $('#sandbox').val('').select();
    if (document.execCommand('paste')) {
        result = sandbox.val();
    }
    sandbox.val('');
    return result;
}

I'm using jQuery for simplicity but you get the idea. Now any time I want to use the clipboard functionality I simply call the relevant function. Other pages in my extension can access this API via chrome.extension.getBackgroundPage() but you can also use chrome.runtime.getBackgroundPage(callback) if your background page is an event page.

I'm not sure if this is best practice or if such a thing even exists for this functionality yet but this definitely works for me and is very clean.

edited Apr 17 '14 at 10:59

answered Aug 22 '11 at 12:06

neocotic

2,131
18
18

thank you very much I could'nt get your code to work out of the box, but changing result = sandbox.val(); to result = $("#sandbox").val(); did the trick – monopoint Aug 26 '11 at 19:57
Ah, lifesaver! Had a problem where I had copied some other code that used a textarea style='display: none;' which stopped it working but this does the trick perfectly! – iono Aug 18 '12 at 10:14
3

make sure you have your permissions set as well. "permissions": [ "clipboardWrite" ] – Jordan Rumpelstiltskin Nemrow May 29 '15 at 18:33
2

Hello, today 07/21/2015, document.execCommand('copy') works fine without extensions, but document.execCommand('paste') doesn't work. Do I need still the extension? – Diego Jul 22 '15 at 00:37
very good and working answer.. but i was trying to figure out what exactly are you using the sanbox for .. can you explain more about this thanks – Mina Gabriel Dec 23 '15 at 19:26
2

can someone show an example without jQuery? perhaps link to a github gist? that would help – Alexander Mills Jan 11 '18 at 20:38
And also need to make sure that it is not hidden using something like `display: none;`. I used a few other ways to hide it like `opacity`, `width` and `height`. – myTerminal Jun 27 '19 at 17:19
without jQuery: https://gist.github.com/srsudar/e9a41228f06f32f272a2 – Scott Driggers Jun 15 '21 at 02:00

score 20 · Answer 2 · answered Jul 27 '14 at 18:12

This is too long for a comment on Alasdair's excellent response, so I'm creating another answer. Alasdair's answer is excellent and worked great for me, but as a newcomer to Chrome extensions it still took me a while to get it working. For anyone in a similar position, here is an expansion on his answer.

Background/event pages are able to interact with the system clipboard, provided you've requested the appropriate permissions. They are not able to interact with the DOM of pages the user has loaded. Content scripts cannot interact with the system clipboard, but they can interact with the DOM of pages the user has loaded. Take a look at the explanation of the extension architecture for a good overview of all this.

This essentially means you need to do the copy/paste actions from the system clipboard in your event/background pages, which is what Alasdair has outlined above. Any pasting or copying from the DOM of the page the user is viewing has to occur in your content script. The two scripts are able to communicate pretty easily with message passing.

I have an extension whose only purpose is to paste, and the architecture came largely from this post. If you want to see the above technique in practice, take a look at the code. In particular, background.html, background.js, and contentscript.js.

If you're in a real hurry, here is a gist.

score 0 · Answer 3 · answered Jun 25 '16 at 08:20

  function PasteString() {
    var editor = document.getElementById("TemplateSubPage");
    editor.focus();
  //  editor.select();
    document.execCommand('Paste');
}

function CopyString() {
    var input = document.getElementById("TemplateSubPage");
    input.focus();
   // input..select();
    document.execCommand('Copy');
    if (document.selection) {
        document.selection.empty();
    } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
    }
}

Hope this will work for you

the proper use of execcommand("paste") in a chrome extension

3 Answers3

Linked