Why document.execCommand('paste') is not working in my extension

Question

I am creating a Google chrome extension which can read the contents of clipboard.
But I am unable to get the documentation for this. I want to get the clipboard content as in IE's clipboard API.
In the manifest file i gave permissions to

clipboardRead and clipboardWrite.

I have created a function in Background page as below

 chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
 if (request.method == "getClipData")
   sendResponse({data: document.execCommand('paste')});
 else
   sendResponse({}); // snub them.
 });

And in Content Script I am calling the function like this

 chrome.extension.sendRequest({method: "getClipData"}, function(response) {
    alert(response.data);
 });

But this returns me undefined...

Possible duplicate of [How to read the Clipboard text in google chrome extension](http://stackoverflow.com/questions/8509670/how-to-read-the-clipboard-text-in-google-chrome-extension) — David Jeske, Apr 12 '17 at 16:50

score 3 · Answer 1 · answered Apr 12 '17 at 16:47

document.execCommand('paste') returns success or failure, not the contents of the clipboard.

The command triggers a paste action into the focused element in the background page. You have to create a TEXTAREA or DIV contentEditable=true in the background page and focus it to receive the paste content.

You can see an example of how to make this work in my BBCodePaste extension:

https://github.com/jeske/BBCodePaste

Here is one example of how to read the clipboard text in the background page:

bg = chrome.extension.getBackgroundPage();        // get the background page
bg.document.body.innerHTML= "";                   // clear the background page

// add a DIV, contentEditable=true, to accept the paste action
var helperdiv = bg.document.createElement("div");
document.body.appendChild(helperdiv);
helperdiv.contentEditable = true;

// focus the helper div's content
var range = document.createRange();
range.selectNode(helperdiv);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
helperdiv.focus();    

// trigger the paste action
bg.document.execCommand("Paste");

// read the clipboard contents from the helperdiv
var clipboardContents = helperdiv.innerHTML;

If you want plain-text instead of HTML, you can either use helperdiv.innerText, or you can switch to using a textarea. If you want to parse the HTML in some way, you can walk the HTML dom inside the DIV (again, see my BBCodePaste extension)

Uncaught TypeError: chrome.extension.getBackgroundPage is not a function — Garric, Dec 27 '20 at 22:31

score 0 · Answer 2 · edited Jun 13 '18 at 06:46

We cant access clipboard from javascript instead IE for chrome and other browsers.

The hack for this is very simple: create own custom clipboard which store text on cut and from where we paste it directly

function copy(){
if (!window.x) {
    x = {};
}
x.Selector = {};
x.Selector.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}
var mytext = x.Selector.getSelected();
document.getElementById("book").innerHTML =mytext;
}

function cut(){
if (!window.x) {
    x = {};
}
x.Selector = {};
x.Selector.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}
var mytext = x.Selector.getSelected();
document.getElementById("book").innerHTML =mytext;
x.Selector.setSelected()="";

}

function paste()
{
    var firstDivContent = document.getElementById('book');
var secondDivContent = document.getElementById('rte');


secondDivContent.innerHTML += firstDivContent.innerHTML;
rte.focus();
}

function clear()
{

document.getElementById('rte').innerHTML="";
rte.focus();



}

 <button id="cut"onclick="cut();">Cut</button>
 <button id="copy"onclick="copy();">Copy</button>
 <button id="paste"onclick="paste();">Paste</button>
 Working Div
 <div id="rte" contenteditable="true" style="overflow:auto;padding:10px;height:80vh;border:2px solid black;" unselectable="off" ></div>
 Own Clipboard(hack)
    <div id="book" contenteditable="true"style="background-color:#555;color:white;"> </div>

score 0 · Accepted Answer · answered Dec 14 '11 at 14:36

0

var str = document.execCommand('paste');

You will need to add the clipboardRead permission too.

answered Dec 14 '11 at 14:36

abraham

46,583
10
100
152

Hey, it returns True instead of the clipboard! The code is the same than the above and I gave the permissions, what am I doing wrong? – Xerz Oct 07 '12 at 20:24
Mine returns true as well... seems like execCommand() does not return a string at all: http://help.dottoro.com/ljcvtcaw.php It seems that it literally calls the paste command. This looks like a workaround: http://stackoverflow.com/questions/7144702/the-proper-use-of-execcommandpaste-in-a-chrome-extension – Mark Lalor Aug 21 '14 at 00:33

Why document.execCommand('paste') is not working in my extension

3 Answers3

Linked