如何从Google Chrome扩展将HTML格式的文本复制到剪贴板

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

本文关键字：格式 文本 复制 剪贴板 HTML Google Chrome 扩展      更新时间：2023-09-26

比方说，在我的Chrome扩展中，我需要将用户格式化的HTML文本复制到剪贴板上。文本（以HTML形式）可能是这样的：

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

如果我使用这个JavaScript示例，我得到的只是上面的HTML标记。但我想知道，我可以把它复制成格式化的文本，还是这个？

这是一个测试
这是也
谢谢

crbug.com/395376修复后，您可以在清单文件中声明clipboardWrite权限，只需使用yuor内容脚本中的以下代码：

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');

在修复之前的错误之前，您必须将数据传递到后台页面并从那里复制消息。此解决方案不是最佳方案，因为您将在后台页面中插入不受信任的HTML。看见https://stackoverflow.com/a/25275151例如关于如何滥用CCD_ 2进行复制。

如果您了解使用innerHTML的相关风险，并接受其后果，那么您可以使用以下代码来复制富文本：

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

背景页：

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();
    }
});

（如果读者想复制文本而不是富文本，请参阅剪贴板复制/粘贴到内容脚本（Chrome扩展））

相关文章：