CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools
Exception
Exception

Reputation: 8389

How to read the Clipboard text in google chrome extension

I am trying to read clipboard text in Google chrome extension. As of now I have tried with tis code and it is returning me undefined. Please help me on this.

In background.html my code is 

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

In My content script my code is 

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

Upvotes: 2

Views: 12535

Answers (2)

David Jeske
David Jeske

Reputation: 2466

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;

Upvotes: 0

hamczu
hamczu

Reputation: 1774

Once upon a time there was an experimental API chrome.experimental.clipboard, but there is no more http://code.google.com/chrome/extensions/trunk/experimental.clipboard.html

Maybe you should try: How do I copy to the clipboard in JavaScript?

UPDATE: I was wrong - there is a possibility. As permissions page says there are "clipboardRead" and "clipboardWrite" permissions. So maybe they will work for you.

Upvotes: 2

Related Questions