實測對象 (測試日期：2020-09-30)

1. Chrome Canary 版本 87
2. Chrome 版本 86 (2020-10-16 追加修復)
3. Chrome 版本 85
4. Firefox Developer Edition 版本 81
5. Safari 版本 13.1 (build 605)

測試目標

1. 測試主流瀏覽器根據 WD-clipboard-apis-20200818關於 Clipboard介面的實作完成度：

   interface Clipboard : EventTarget {
     Promise<Iterable<ClipboardItem>> read();
     Promise<DOMString> readText();
     Promise<undefined> write(Iterable<ClipboardItem> data);
     Promise<undefined> readText(DOMString data);
   };

2. 如果支援，測試實作完整度與差異。
3. 如果不支援，能用什麼方式檢測與替代。

clipboard.read()

讀取剪貼簿複合內容。無參數，返回 Promise<Array<ClipboardItem>>。

clipboard.readText()

讀取剪貼簿純文字內容。無參數，返回 Promise<string>。

clipboard.write(data)

對剪貼簿寫入複合內容。參數為一組 Array<ClipboardItem>，返回 Promise<void>。

clipboard.writeText(data)

對剪貼簿寫入純文字。參數為一組字串，返回 Promise<void>。

從剪貼簿讀取純文字

const clipboardText = await navigator.clipboard.readText()

對剪貼簿寫入純文字

const text = 'Hello, world!'
await navigator.clipboard.writeText(text)

讀取純文字 (text/plain)

既然能後讀寫多媒體，純文字自然不在話下；首先是用另一組介面讀取純文字的例子：

const clipboardItems = await navigator.clipboard.read()
for (const clipboardItem of clipboardItems) {
  if (clipboardItem.types.indexOf('text/plain') < 0) {
    continue
  }

  const textBlob = await clipboardItem.getType('text/plain')
  const text = await (new Response(blob)).text()

  // result = text
}

寫入純文字 (text/plain)

const text = 'Hello, world!'
const textBlob = new Blob([text], { type: 'text/plain' })
const clipboardItem = new ClipboardItem({
  'text/plain': textBlob
})
await navigator.clipboard.write([clipboardItem])

讀取 Binary 並轉為 base64 (image/png)

const clipboardItems = await navigator.clipboard.read()

for (const clipboardItem of clipboardItems) {
  if (clipboardItem.types.indexOf('image/png') < 0) {
    continue
  }

  const imageBlob = await clipboardItem.getType('image/png')
  const imageBase64Text = await new Promise((resolve) => {
    const fileReader = new FileReader()
    fileReader.onLoad = () => {
      // 格式為 "data:[<mediatype>];base64,<data>"
      const dataUri = fileReader.result
      const [, base64Text] = dataUri.split(',')
      resolve(base64Text)
    }
    fileReader.readAsDataURL(imageBlob)
  })

  // result = imageBase64Text
}

寫入 Binary 從 base64 (image/png)

這邊使用前一個例子讀入的 base64 字串當作輸入：

const imageBase64Text = 'iVBORw0KGgoAAAANSUhEUgAAAQ...'
const chars = atob(imageBase64Text)
const buffer = new ArrayBuffer(chars.length)

const bytes = new Uint8Array(buffer)
for (let i = chars.length; i >= 0; --i) {
  bytes[i] = chars.charCodeAt(i)
}

const imageBlob = new Blob([buffer], { type: 'image/png' })
const clipboardItem = new ClipboardItem({
  'image/png': imageBlob
})

await navigator.clipboard.write([clipboardItem])

Chrome Canary 版本 87

Chrome Canary 果然不讓人失望；會長起初就以 Canary 為主進行開發才會覺得沒有瓶頸，過程異常順利。後來遇到的所有問題都沒有在它身上發生，依照 W3C 的標準和範例來開發，它就是能運作。

作為第一個測試對象，它是會長開發常規前端項目時的主要環境，自然有它與眾不同的優點。將來有機會再寫一篇會長玩遍各家瀏覽器，最後選擇它的原因吧 (ﾉ∀`)

Chrome 版本 86 (2020-10-19 追加)

會長在後記 (2020-10-14) 提到自己算是踩了個早坑，沒想到就只早了那麼一點點…

兩天後 (2020-10-16) 收到了 v86 正式版推送，下個段落提到的 v85 的問題已經完成修復。

只是目前 v86 的使用率還很低，遷移期可能還要三、四週，前一個版本的解決方案也還是應該作為 fall through 保留著。

Chrome 版本 85

開發用的瀏覽器自然不會和日常使用併在一起；雖然比 Canary 少了兩個版號，但功能還算齊全，只有兩個小問題：一個可以處理、一個束手無策。

問題就在 text/html 的讀寫上。

現在我們知道了兩種讀取、兩種寫入剪貼簿的方式，這些方法最後得要交替著使用，作為發現功能缺失時的替代方案。

Firefox Developer Edition 版本 81

Firefox 的支援度不太理想，有些硬傷不像 Chrome 有方法可以補救，需要加強 (ノω・。)

首先是 Clipboard API，目前 Firefox 不提供 ClipboardItem，也只支援：

• clipboard.read()
• clipboard.readText()
• clipboard.write()
• clipboard.writeText()

也就是說：

1. 無法讀取剪貼簿 (但可以貼上)。
2. 可以直接寫入純文字。
3. 只能透過模擬複製來寫入 text/html。 (和 Chrome v85 相同)
4. 無法寫入 Blob。

補充

1. 想讀取剪貼簿(純文字)，目前只能透過擴充套件作為 worker 來讀取。
2. Permissions API 尚未實作 clipboard-read 和 clipboard-write，所以 MDN 的範例實際上是無法在 Firefox 運作的。

Safari 版本 13.1 (build 605)

蘋果總是和別人不一樣，只有在 Safari 應用程式中複製進剪貼簿的內容能夠被 Safari 透過 Clipboard API讀取；其餘則要求使用者顯性地與 UI 互動才能存取剪貼簿。

除此之外，從檔案系統中複製的圖片，貼上時檔名會被忽略。

雖然讀取剪貼簿有許多限制，但寫入就和 Chrome v87 一樣沒有其他限制，也不用像 Chrome v85 需要模擬複製行為。

整理一下：

1. 讀取剪貼簿需要透過原生 UI 互動，否則只能讀取透過 Safari 寫入剪貼簿的內容。例如：滑鼠右鍵貼上、鍵盤快捷鍵貼上。
2. 從檔案系統中複製的圖片檔名會被忽略。
3. 透過非顯性互動來讀取剪貼簿時，整個頁面會被停住，直到下一個使用者互動。