How to get Clipboard data in Chrome Extension?

Question

I'm having a hard time finding any recent info on how to add a listener for "Ctrl+C", fetching clipboard data, and then writing back to clipboard all in a Chrome Extension. All of the old code that i found was for the older versions that are now deprecated.

Answer 1

Basically you can manipulate clipboard using document.execCommand('paste|copy|cut').

• You'll need to specify "clipboardWrite" and/or "clipboardRead" permissions in manifest.

  "clipboardRead" Required if the extension or app uses document.execCommand('paste').

  "clipboardWrite" Indicates the extension or app uses document.execCommand('copy') or document.execCommand('cut'). This permission is required for hosted apps; it's recommended for extensions and packaged apps.

• Create <input> element (or <textarea>)

• Put focus to it
• Call document.execCommand('paste')
• Grab you string from <input> value attribute.

This worked for me to copy data to clipboard.

Answer 2

In order to read Clipboard text in a chrome extension, you have to:

• request "clipboardRead" permission in your manifest
• create a background script, since only the background script can access the clipboard
• create an element in your background page to accept the clipboard paste action. If you make this a textarea, you will get plain-text, if you make it a div with contentEditable=true, you will get Formatted HTML
• if you want to pass the clipboard data back to an in page script, you'll need to use the message-passing API

To see an example of this all working, see 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;

Answer 3

Here is a very simple solution. All it requires is for your permissions to include "clipboardRead" and "clipboardWrite". The copyTextToClipboard function is taken from here: https://stackoverflow.com/a/18455088/4204557

var t = document.createElement("input");
document.body.appendChild(t);
t.focus();
document.execCommand("paste");
var clipboardText = t.value; //this is your clipboard data
copyTextToClipboard("Hi" + clipboardText); //prepends "Hi" to the clipboard text
document.body.removeChild(t);

Note that document.execCommand("paste") is disabled in Chrome, and will only work in a Chrome extension, not in a web page.

Answer 4

Best workable examples I found are here below example worked for me, sharing here so that someone can get help

function getClipboard() {
    var result = null;
    var textarea = document.getElementById('ta');
    textarea.value = '';
    textarea.select();

    if (document.execCommand('paste')) {
        result = textarea.value;
    } else {
        console.log('failed to get clipboard content');
    }

    textarea.value = '';
    return result;
}