Clipboard access using Javascript - sans Flash?

Question

Is there a reliable way to access the client machine\'s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google D

Answer 1

Here's a pure JS implementation that lets you paste image data which works in Google Chrome: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

Answer 2

In IE, to do this is pretty painless. For Firefox, you need to update users.js and/or prefs.js (you can google for Clipboard access in Firefox). For Chrome, you need to write an extension.

In you extension background_page, have a place holder (an IFrame) in your webpage, have buttons or links like 'cut', 'copy' and 'paste'. also have a hidden iframe paste_holder on your page to get back the text read by the background_page of your extension. In your extension's manifest file, have code like below:

manifest.json

"background_page": "mypaste_helper.html",
"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": ["mypaste_helper.js"],
        "all_frames": true
    }
],
"permissions": [
    "clipboardRead",
    "clipboardWrite",
    "tabs"  
]

mypaste_helper.js

get references to your cut, copy and copy buttons on the page

cutButton.addEventListener("click", function() 
{
            get selected content using window.getSelection()
            pass that text to handleCut function in mypaste_helper.html     
}, false);      
copyButton.addEventListener("click", function() 
{
            get selected content using window.getSelection()
            pass that text to handleCopy function in mypaste_helper.html 
}, false);      
pasteButton.addEventListener("click", function() 
{
            get content from handlePaste function in mypaste_helper.html 
}, false);    

in the callback function

get the contents sent by background_page function set innerHTML of paste_holder frame's document.body with received text.

mypaste_helper.html

handleCopy and handleCut are identical

get reference to your iframe document.body as clipboardholder
set innerHTML of the clipboardholder.contentDocument.body with the data passed by mypaste_helper.js
capture selection through window.getSelection()
selection.selectAllChildren(clipboardholder);
document.execCommand('copy')
read contents of the clipboardholder
pass the text back to callback in mypaste_helper.js

handlePaste

get reference to your iframe document.body as clipboardholder
you may want to clear the contents of clipboardholder.contentDocument.body
capture selection through window.getSelection()
selection.selectAllChildren(clipboardholder);
document.execCommand('paste')
read contents of the clipboardholder
pass the text back to callback in mypaste_helper.js