CODEWITHSUNDEEP
javascripthtmlgoogle-chromegoogle-chrome-extensionclipboard
c00000fd
c00000fd

Reputation: 22327

How to copy HTML formatted text on to Clipboard from Google Chrome extension?

Say, in my Chrome extension I need to copy a user formatted HTML text on to Clipboard. The text (in its HTML form) may be something like this:

This is a <b>test</b><div><br></div>
<div>And this is too</div><div><br></div><div>Thank you</div>

If I use this JavaScript example, all I get copied is HTML markup from above. But I'm wondering, can I copy it as formatted text, or this?

This is a test
And this is too
Thank you

Upvotes: 5

Views: 6346

Answers (1)

Rob W
Rob W

Reputation: 349252

Once crbug.com/395376 is fixed, you can declare the clipboardWrite permission in your manifest file and simply use the folllowing code from yuor content script:

var element = document.body; // Example, select the "whole" document
// Change selected area
var r = document.createRange();
r.selectNode(element);
var s = window.getSelection();
s.removeAllRanges();
s.addRange(r);
// Copy - requires clipboardWrite permission + crbug.com/395376 must be fixed
document.execCommand('copy');

Until the previous bug is fixed, you have to pass the data to the background page and copy the message from there. This solution is not optimal because you're going to insert untrusted HTML in your background page. See https://stackoverflow.com/a/25275151 for examples on how using innerHTML for copying can be abused.

If you understand the risks associated with using innerHTML, and you're accepting its consequences, then you could use the following code to copy rich text:

// content script
var element = document.body; // Example
chrome.runtime.sendMessage({
    html: 'copyhtml',
    text: element.outerHTML
});

background page:

chrome.runtime.onMessage.addListener(function(message) {
    if (message && message.type == 'copyhtml') {
        var wrapper = document.createElement('div');
        // WARNING: Potentially insecure!
        wrapper.innerHTML = message.html;
        document.body.appendChild(wrapper);
        var range = document.createRange();
        r.selectNode(wrapper);
        var s = window.getSelection();
        s.removeAllRanges();
        s.addRange(r);
        // Copy - requires clipboardWrite permission
        document.execCommand('copy');
        wrapper.remove();
    }
});

(if the reader wants to copy text instead of rich text, see Clipboard Copy / Paste on Content script (Chrome Extension))

Upvotes: 3

Related Questions