如何在Chrome DevTools中将Fetch API的response.text()复制到剪贴板

失败核心原因 #

之前使用copy()方法、手动创建DOM元素执行复制的方案失效，核心是浏览器对剪贴板操作有强制限制：

• 所有剪贴板写入操作，必须由用户主动触发的交互事件（click、touchstart、keydown等）唤起，脱离用户交互上下文的异步回调（比如页面加载完成后直接执行、请求返回后无用户操作直接执行）会被浏览器直接拦截
• 非安全上下文（HTTP非本地环境）下剪贴板API会被禁用

可直接运行的实现代码 #

首先需要提供用户可主动触发的交互入口（比如复制按钮），在交互事件的回调链中完成请求拉取、剪贴板写入的全流程，XHR场景只需替换fetch请求部分为对应XHR逻辑即可：

<!-- 交互触发入口 -->
<button id="copyBtn">复制readme.txt内容</button>

const copyBtn = document.getElementById('copyBtn');
copyBtn.addEventListener('click', async function() {
  let copyContent = '';
  try {
    // 交互触发后拉取目标内容
    const res = await fetch('/readme.txt');
    copyContent = await res.text();
    // 现代浏览器优先使用原生Clipboard API
    await navigator.clipboard.writeText(copyContent);
    alert('内容已复制到剪贴板');
  } catch (e) {
    // 旧浏览器降级方案：创建临时DOM元素执行复制
    const tempTextArea = document.createElement('textarea');
    tempTextArea.value = copyContent;
    // 隐藏临时元素，避免触发页面滚动
    tempTextArea.style.cssText = 'position:fixed;opacity:0;top:0;left:0;';
    document.body.appendChild(tempTextArea);
    tempTextArea.select();
    document.execCommand('copy');
    document.body.removeChild(tempTextArea);
    alert('内容已复制到剪贴板');
  }
});

注意事项 #

• 如果接口请求耗时超过3-5秒（浏览器用户手势激活有效期），建议提前发起请求将内容缓存到变量中，用户点击复制按钮时直接读取缓存内容写入剪贴板，避免因上下文失效被拦截
• 本地开发可在localhost环境下调试，线上部署必须使用HTTPS协议，否则剪贴板API无法正常调用
• 不要在请求回调、定时器、页面初始化逻辑中直接触发复制，这类无用户主动交互的场景会被浏览器强制拦截

内容的提问来源于stack exchange，提问作者Mech