单击 Chrome 扩展程序的浏览器操作时将文本复制到剪贴板答案

【问题标题】：Copy text to clipboard when a Chrome extension’s browser action is clicked单击 Chrome 扩展程序的浏览器操作时将文本复制到剪贴板
【发布时间】：2020-02-22 12:52:10
【问题描述】：

我想点击我的 Chrome 扩展程序的浏览器操作按钮来复制一些文本，但是网站上使用的方法不起作用。

（我知道有一些类似的问题，但是他们回答的是在注入脚本或浏览器动作弹出脚本中复制文本，而不是浏览器动作脚本。）

样板

manifest.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
    }
}

events.js：

chrome.browserAction.onClicked.addListener(_ => {
    copy(new Date().toISOString().slice(0, 19))
})

// Define copy() here.

方法 1

不要定义 copy 并希望它像在控制台中一样在全局范围内定义。

不是。

方法2

function copy(text) {
    navigator.clipboard.writeText(text)
}

此操作失败并显示错误消息“DOMException: Document is not focus”。

方法 3

function copy(text) {
    focus()
    navigator.clipboard.writeText(text)
}

这与方法 2 的行为相同。

方法 4

function copy(text) {
    const ta = document.createElement('textarea')
    ta.value = text
    ta.select()
    document.execCommand('copy')
    ta.remove()
}

此操作失败且没有错误消息。

方法 5

将复制脚本注入活动选项卡。我没有编写这个代码，因为如果没有可访问的活动选项卡、选项卡与它们的全局变量混淆、JS 在活动选项卡上暂停等，它会中断，并且还需要过多的权限。

方法 6

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>

copy.js：

(async _ => {
    await navigator.clipboard.writeText(decodeURIComponent(location.search.slice(1)))
    close()
})()

这可行，但不是很好，因为它在视觉上出现故障、缓慢且迂回。

【问题讨论】：

标签： javascript google-chrome-extension

【解决方案1】：

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

可能想为none 或0 设置更多的CSS 属性，例如border/padding/margin，以防万一。

【讨论】：