Copy to Clipboard in Chrome Extension

user_414569 0
Viewed 66318

I'm making an extension for Google Chrome and I have hit a snag.

I need to copy a readonly textarea's content to the clipboard on click in the popup. Does anyone know the best way to go about this with pure Javascript and no Flash? I also have jQuery loaded in the extension, if that helps any. My current (non-working) code is... 

function copyHTMLCB() {
$('#lb_html').select();
$('#lb_html').focus();
textRange = document.lb_html_frm.lb_html.createTextRange();
textRange.execCommand("RemoveFormat");
textRange.execCommand("Copy");
alert("HTML has been copied to your clipboard."); }
google-chrome-extension clipboard javascript
10 Answers

The Clipboard API is now supported by Chrome, and is designed to replace document.execCommand.

From MDN:

navigator.clipboard.writeText(text).then(() => {
    //clipboard successfully set
}, () => {
    //clipboard write failed, use fallback
});
user_73703540 
let content = document.getElementById("con");
content.select();
document.execCommand("copy");

The above code works completely fine in every case. Just make sure the field from which you are picking up the content should be an editable field like an input field.

user_87047490

Only this worked for me.

document.execCommand doesn't work at all for chrome as it seems to me.

I left execCommand in the code, but probably for one simple reason: So that this shit just was there :)

I wasted a lot of time on it instead of going through my old notes.

    function copy(str, mimeType) {
        document.oncopy = function(event) {
            event.clipboardData.setData(mimeType, str);
            event.preventDefault();
        };
        try{            
            var successful = document.execCommand('copy', false, null);
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copying text command was ' + msg);
            if (!successful){
                navigator.clipboard.writeText(str).then(
                    function() {
                        console.log('successful')
                    }, 
                    function() {
                        console.log('unsuccessful')
                    }
                );
            }
        }catch(ex){console.log('Wow! Clipboard Exeption.\n'+ex)}
    }
user_18085150

I had a similar problem where I had to copy text from an element using only javascript. I'll add the solution to that problem here for anyone interested. This solution works for many HTML elements, including textarea.

HTML:

    <textarea id="text-to-copy">This is the text I want to copy</textarea>
    <span id="span-text-to-copy">This is the text I want to copy</span>

Javascript:

let textElement = document.getElementById("text-to-copy");

//remove selection of text before copying. We can also call this after copying
window.getSelection().removeAllRanges();

//create a Range object
let range = document.createRange();

//set the Range to contain a text node.
range.selectNode(textElement);

//Select the text node
window.getSelection().addRange(range);

try {
    //copy text
    document.execCommand('copy');
} catch(err) {
    console.log("Not able to copy ");
}

Note that if you wanted to copy a span element for instance, then you could get its text node and use it as a parameter for range.selectNode() to select that text:

let elementSpan = document.getElementById("span-text-to-copy");
let textNode = elementSpan.childNodes[0];
user_49351400
Related