chrome 扩展程序访问剪贴板操作总结

微wx笑 2025-05-11【前端开发】23 0 0关键字： chrome 扩展程序剪贴板

chrome 扩展程序访问剪贴板操作总结读取剪贴板中的内容：// 创建临时 textarea 用于粘贴const textarea = document.createElement('textarea');textarea.style.posit

chrome 扩展程序访问剪贴板操作总结uae无知

读取剪贴板中的内容：uae无知

// 创建临时 textarea 用于粘贴
const textarea = document.createElement('textarea');
textarea.style.position = 'fixed';
textarea.style.opacity = '0';
document.body.appendChild(textarea);
textarea.focus();
 
// 执行粘贴命令
document.execCommand('paste');
var text = textarea.value;
document.body.removeChild(textarea);
 
console.log('aaa剪贴板内容:', text);

这种老的方式虽然使用的代码比较多，但是不会弹出提示；uae无知

下面这种新的方式就会弹出提示，询问用户是否允许，如果用户不允许，那么就访问失败了；uae无知

// 尝试读取剪贴板
//const text = await navigator.clipboard.readText();
//console.log(`await剪贴板内容: ${text}`);

写入剪贴板是使用这样的方式：uae无知

var conEle = document.createElement("input");
if (str.includes('\n') || str.includes('\r')){
    conEle = document.createElement("textarea");
}
var selectionObj = window.getSelection();
var rangeObj = null;
if (selectionObj.rangeCount > 0){
    rangeObj = selectionObj.getRangeAt(0);
}
conEle.value = str; //str.replace(/[\r\n]/g, '');
conEle.style.position = 'fixed';
conEle.style.left = '-9999px';
document.body.appendChild(conEle);
conEle.select();
document.execCommand("copy");
conEle.remove();

但是这种老的方式会再次触发 copy 事件uae无知

而下面这种新的方式却不会，也不会弹出询问用户是否允许的对话框uae无知

浏览器的安全策略更多限制的是读取，uae无知

var mkdown = selection.html.replace(/<\/?strong>/g, '**');
const clipboardItem = new ClipboardItem({
    'text/html': new Blob([mkdown], { type: 'text/html' }),
    'text/plain': new Blob([mkdown], { type: 'text/plain' })
});
 
// 写入剪贴板
await navigator.clipboard.write([clipboardItem]);
console.log('成功写入剪贴板', selection.html);