How to get Clipboard data in Chrome Extension?
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.
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 pagebg.document.body.innerHTML= ""; // clear the background page// add a DIV, contentEditable=true, to accept the paste actionvar helperdiv = bg.document.createElement("div");document.body.appendChild(helperdiv);helperdiv.contentEditable = true;// focus the helper div's contentvar range = document.createRange();range.selectNode(helperdiv);window.getSelection().removeAllRanges();window.getSelection().addRange(range);helperdiv.focus(); // trigger the paste actionbg.document.execCommand("Paste");// read the clipboard contents from the helperdivvar clipboardContents = helperdiv.innerHTML;
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 datacopyTextToClipboard("Hi" + clipboardText); //prepends "Hi" to the clipboard textdocument.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.