25

I have a problem with my extension. I want to paste data from the clipboard.

So far, I've got this:

function pasteAndGo()
{
    document.execCommand('paste')
    alert("Pasted")
}

The alert comes up, but nothing has been pasted.

I've got a feeling it's the document part that needs changing, but I don't know what to do. Any ideas?

4

8 Answers 8

20

Calling document.execCommand("paste") is not supported by "reasonable" browsers, because of security concerns as it might enable the script to read sensitive data (like passwords) from the clipboard.

This is the compatibility matrix of document.execCommand("...") concerning clipboard events:

"copy" "paste" "cut"
IE OK OK n/a
Edge OK n/a OK
Firefox OK n/a OK
Chrome OK n/a OK

My two cents to this:

  • The behaviour of Edge, Firefox and Chrome is "reasonable" as they prevent pasting/reading data from the clipboard. They do enable cut, as cut is simply a copy followed by a delete.
  • The behaviour of IE makes no sense to me, as it enables the "risky" paste, but does not execute the cut event.

You can feature detect the possible commands using the document.queryCommandSupported method.

Edit: According to MDN document.queryCommandSupported is now deprecated and should no longer be used.

19

There used to be an experimental clipboard API in Chrome, but this was removed in Chrome 13.

Chrome has moved towards the more standard document.execCommand('paste'), document.execCommand('copy') and document.execCommand('cut') commands:

In Chrome you'll need permissions need to be added to your manifest: "clipboardRead" and "clipboardWrite".

Up until Chrome 38, these clipboard permissions were only available to extension pages such as background scripts. As of Chrome 39, content scripts can also use these clipboard APIs after declaring the clipboard permissions in the manifest file.

2
9

This works well for me in a background page.

function getClipboard() {
    var pasteTarget = document.createElement("div");
    pasteTarget.contentEditable = true;
    var actElem = document.activeElement.appendChild(pasteTarget).parentNode;
    pasteTarget.focus();
    document.execCommand("Paste", null, null);
    var paste = pasteTarget.innerText;
    actElem.removeChild(pasteTarget);
    return paste;
};

Of course your extension still needs "clipboardRead" permission and you have to use message passing to get this information back to your content script:

content.js:

chrome.extension.sendMessage({
    cmd: "clipboard", //$NON-NLS-0$
    action: "paste" //$NON-NLS-0$
}, function(response) {
    if (response.paste) {
        var range = document.getSelection().getRangeAt(0);
        range.deleteContents();
        range.insertNode(document.createTextNode(response.paste));
    }
});

background.js:

function getClipboard() {
    var pasteTarget = document.createElement("div");
    pasteTarget.contentEditable = true;
    var actElem = document.activeElement.appendChild(pasteTarget).parentNode;
    pasteTarget.focus();
    document.execCommand("Paste", null, null);
    var paste = pasteTarget.innerText;
    actElem.removeChild(pasteTarget);
    return paste;
};

function onClipboardMessage(request, sender, sendResponse) {
    if (request.action === "paste") { //$NON-NLS-0$
        sendResponse({
            paste: getClipboard()
        });
    }
}

chrome.extension.onMessage.addListener(onClipboardMessage);
2
  • @peter-ehrlich Hi Peter, how about this example? Is it what you were asking for? May 1, 2013 at 11:44
  • Hi @josephduffy did you get this to work? Did you example help? May 1, 2013 at 11:48
2

You can't execute it on a regular page, only in a background page.

5
  • 1
    Do you do the whole invisible textarea thing? Anyone have a code sample? Feb 10, 2013 at 19:37
  • 1
    not true anymore, see answer below ('as of chrome 39, content scripts can also use these clipboard APIs after declaring the clipboard permissions in the manifest file')
    – schellmax
    Jan 21, 2015 at 20:24
  • 2
    An example of an background page? Sep 9, 2015 at 16:11
  • 7
    What is a "regular page" vs. a "background page"?
    – intcreator
    Aug 3, 2017 at 20:27
  • @brandaemon Indeed, this means nothing Aug 25, 2017 at 15:58
2

You need to set the clipboardRead permission to use document.execCommand('paste') and the clipboardWrite permission to use execCommand('copy') and execCommand('cut').
Otherwise, the permissions will be denied and nothing will happen.

Check this link for more details.

1

you need to a control in focues which is capable of receiving the content...

For some examples regarding clipboard in JS see http://www.geekpedia.com/tutorial126_Clipboard-cut-copy-and-paste-with-JavaScript.html
and http://help.dottoro.com/ljcvtcaw.php

Regarding Chrome extensions see Copy/Paste Not Working in Chrome Extension

2
  • That's the exact page I found my information form (The link to the other Stack Overflow question). I'll try and work on getting it to paste in the right area? :S Aug 7, 2011 at 10:50
  • you need to have the focus on something that can accept what is in the clipboard - like a textarea when the clipboard contains text...
    – Yahia
    Aug 7, 2011 at 11:45
1

You can mimic a paste by doing the same thing yourself by hand:

  1. Optional: trigger when the user tries to paste
  2. Get the contents of the clipboard (requires permission from user via a pop-up the browser will provide)
  3. Insert content into the active control
  4. Optional: trigger the events a real paste would have triggered (for the benefit of any listeners)

Focusing on steps #2 and #3 first, in this example, I check whether the active element is a text input. If so, I simulate a paste by replacing that text box's highlighted content and repositioning the cursor.

function myPaste() {
  navigator.clipboard.readText()
    .then(clipText => {
      const el = document.activeElement;
      if (el.nodeName === 'INPUT') {
        const newCursorPos = el.selectionStart + clipText.length;
        el.value =
          el.value.substring(0, el.selectionStart) +
          clipText +
          el.value.substring(el.selectionEnd);
        el.setSelectionRange(newCursorPos, newCursorPos);
      }
    });
}

For #1, add a listener to intercept the user's paste attempts:

addEventListener("paste", pasteHandler);

function pasteHandler(e) {
  e.preventDefault();
  myPaste();
}

For #4, add this after el.setSelectionRange(newCursorPos, newCursorPos);:

el.dispatchEvent(new Event('input'));
el.dispatchEvent(new Event('change'));

Note that if you are using a reactive framework that manipulates the DOM on your behalf based on data binding, you will need to defer the cursor position update until after the next DOM render. For instance:

Vue.nextTick(() => {
  el.setSelectionRange(newCursorPos, newCursorPos);
});
0

Because on manifest v3 does not work with service worker, I found a better solution after long researches: (You still need to set the clipboardRead permission in manifest)

navigator.clipboard
        .readText()
        .then(
            (clipText) => console.log(clipText)
        );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.