javascript - How to copy HTML formatted text on to Clipboard from Google Chrome extension? - Stack Overflow

admin管理员组

文章数量:1430706

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

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

• javascript
• html
• google-chrome
• google-chrome-extension
• clipboard

Share Improve this question Follow edited May 23, 2017 at 12:09 CommunityBot 111 silver badge asked Sep 4, 2014 at 5:03 c00000fdc00000fd 22.5k3737 gold badges203203 silver badges442442 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Once crbug./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./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./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))

本文标签： javascriptHow to copy HTML formatted text on to Clipboard from Google Chrome extensionStack Overflow