我想点击我的 Chrome 扩展程序的浏览器操作按钮来复制一些文本，但网站上使用的方法不起作用。
(我知道有一些类似的问题，但是他们回答了在注入(inject)脚本或浏览器操作弹出脚本中复制文本，而不是浏览器操作脚本。)
样板
list .json:
{
"name": "Example",
"version": "0.0.0",
"manifest_version": 2,
"permissions": ["clipboardWrite"],
"browser_action": {"default_title": "Copy some text"},
"background": {
"scripts": ["events.js"],
"persistent": false
}
}
事件.js:
chrome.browserAction.onClicked.addListener(_ => {
copy(new Date().toISOString().slice(0, 19))
})
// Define copy() here.
方法一
不要定义 copy 并希望它像在控制台中一样全局定义。
不是。
方法二
function copy(text) {
navigator.clipboard.writeText(text)
}
此操作失败并显示错误消息“DOMException:文档未聚焦”。
方法三
function copy(text) {
focus()
navigator.clipboard.writeText(text)
}
这与方法 2 的行为相同。
方法四
function copy(text) {
const ta = document.createElement('textarea')
ta.value = text
ta.select()
document.execCommand('copy')
ta.remove()
}
此操作失败且没有错误消息。
方法 5
将复制脚本注入(inject)事件选项卡。我没有编写这个代码，因为如果没有可访问的事件选项卡、选项卡与它们的全局变量混淆、JS 在事件选项卡上暂停等，它会中断，并且还需要过多的权限。
方法六
function copy(text) {
open('copy.html?' + encodeURIComponent(text), '', 'width=1,height=1')
}
(设置宽度和高度会强制打开一个窗口，而不是选项卡，以便保留用户的选项卡选择并减少视觉影响。)
复制.html:
<!doctype html>
<meta charset="utf-8">
<title>Copying…</title>
<div></div>
<script src="copy.js"></script>
复制.js:
(async _ => {
await navigator.clipboard.writeText(decodeURIComponent(location.search.slice(1)))
close()
})()
这可行但不是很好，因为它在视觉上有问题、缓慢且迂回。
最佳答案
应该首先将 textarea 元素添加到实时 DOM，例如到 document.body 并聚焦，因为 execCommand 在 document.activeElement 上运行。您可以隐藏文本区域，使其不闪烁。
function copy(text) {
const ta = document.createElement('textarea');
ta.style.cssText = 'opacity:0; position:fixed; width:1px; height:1px; top:0; left:0;';
ta.value = text;
document.body.appendChild(ta);
ta.focus();
ta.select();
document.execCommand('copy');
ta.remove();
}
可能想将更多的 CSS 属性设置为 none 或 0，例如 border/padding/margin 以防万一。
关于javascript - 单击 Chrome 扩展浏览器操作时将文本复制到剪贴板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60348917/