Javascript Chrome 76使用导航器将内容复制到剪贴板

我刚刚更新到chrome 76 stable，正在尝试使用新的剪贴板API将一些文本（以及稍后的图像）复制到剪贴板。但是，

navigator.clipboard.write（data）

似乎不起作用。这是我的密码：

setInterval(function() {
    console.log("Wriing to clipbard");  
    navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
        if (result.state === 'granted') {
            var data = new Blob(["Text data"], {type : "text/plain"});
            navigator.clipboard.write(data).then(function() {
              console.log("Copied to clipboard successfully!");
            }, function(error) {
              console.error("unable to write to clipboard. Error:");
              console.log(error);
            });
        } else {
            console.log("clipboard-permissoin not granted: " + result);
        }
    });
}, 3000);

我在一个chrome扩展内容脚本中运行它，并设置了剪贴板权限，因此权限确实得到了授予。抛出的eror是：

无法写入剪贴板。错误：

TypeError: Failed to execute 'write' on 'Clipboard': Iterator getter is not callable.

奇怪的是，当我使用

navigator.clipboard.write text（text）

而不是

navigator.clipboard.write（data）

时，一切都能正常工作。问题是，我想使用

write（data）

，因为以后我也想将图像写入剪贴板。你知道为什么它不起作用吗？多谢各位

编辑：我从规格表中得到了代码

更新：好的，我通过使用ClipboardItem（见下面的答案）实现了文本复制，但是如果我对dataURL编码的图像进行同样的操作，整个网页就会崩溃，并显示一条“Aw snap”消息。所以我不确定那里发生了什么。以下是将使站点崩溃并强制重新加载的代码：

setInterval(function() {
    console.log("Wriing to clipbard");  
    navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
        if (result.state === 'granted') {
            //var blob = new Blob(['hello'], {type: 'text/plain'});
            var data = new Blob(["iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg=="], {type : "image/png"});

            var item = new ClipboardItem({'image/png': data});
            navigator.clipboard.write([item]).then(function() {
              console.log("Copied to clipboard successfully!");
            }, function(error) {
              console.error("unable to write to clipboard. Error:");
              console.log(error);
            });
        } else {
            console.log("clipboard-permissoin not granted: " + result);
        }
    });
}, 3000);

---

好的，这是对我有效的解决方案。在调用write（）之前，必须将blob包装在ClipboardItem对象中。我偶然发现了这个解决方案，通过阅读，然后在网上搜索“剪贴簿”，然后找到了这个代码。这方面似乎还没有真正的文档，但是，嘿，它很管用

setInterval(function() {
    console.log("Wriing to clipbard");  
    navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
        if (result.state === 'granted') {
            var blob = new Blob(['hello'], {type: 'text/plain'});
            var item = new ClipboardItem({'text/plain': blob});
            navigator.clipboard.write([item]).then(function() {
              console.log("Copied to clipboard successfully!");
            }, function(error) {
              console.error("unable to write to clipboard. Error:");
              console.log(error);
            });
        } else {
            console.log("clipboard-permissoin not granted: " + result);
        }
    });
}, 3000);

更新：好的，我也得到了图像复制工作（在同一来源看）。url是图像的url（duh）

async function copyImage(url) {
    console.log("Wriing to clipbard");  

    const response = await fetch(url);
    const blob = await response.blob();

    const item = new ClipboardItem({'image/png': blob});
    await navigator.clipboard.write([item]).then(function() {
      console.log("Copied to clipboard successfully!");
    }, function(error) {
      console.error("unable to write to clipboard. Error:");
      console.log(error);
    });
}