monopoint monopoint - 5 months ago 259
Javascript Question

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

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>

Answer

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.