1 of 42

📋�Clipboard APIs on the Web

Lucas Garron

July 10, 2018

2 of 42

3 of 42

Agenda

clipboard-polyfill
Async Clipboard API
Older APIs
Future

4 of 42

clipboard-polyfill

5 of 42

github.com/lgarron/clipboard-polyfill

6 of 42

Asynchronous Clipboard API

7 of 42

Asynchronous Clipboard API

<button onclick="copy()">Copy text!</button>�<script>�function copy() {�� navigator.clipboard.writeText("Hello world!");��};�</script>

8 of 42

Asynchronous Clipboard API

<button onclick="copy()">Copy text!</button>�<script>�function copy() {� navigator.clipboard.writeText("Hello world!").then(� console.log,� console.error);�};�</script>

9 of 42

Asynchronous Clipboard API

�var dt = new DataTransfer();�dt.setData("text/plain", "plain text")�dt.setData("text/html", "<b>markup</b> text")�navigator.clipboard.write(dt);

10 of 42

Asynchronous Clipboard API

�navigator.clipboard.readText().then(� console.log,� console.error�);

11 of 42

navigator.clipboard

Promise<void>� writeText(DOMString)��Promise<void>� write(DataTransfer)

Promise<DOMString>� readText()��Promise<DataTransfer>� read()

https://w3c.github.io/clipboard-apis/#async-clipboard-api

12 of 42

Availability

writeText() – with user gesture�� 66+ 53+

13 of 42

Availability

https://w3c.github.io/clipboard-apis/

14 of 42

Older APIs

15 of 42

Other APIs

Flash
Internet Explorer
document.execCommand("copy")
Chrome Extension API / Web Extensions
Async Clipboard API

16 of 42

Most compatible until 2015

Flash
Internet Explorer
document.execCommand("copy")
Chrome Extension API / Web Extensions
Aync Clipboard API

17 of 42

Most compatible in 2018

Flash
Internet Explorer
document.execCommand("copy")
Chrome Extension API / Web Extensions
Aync Clipboard API

18 of 42

Flash

Formerly the most compatible API
Requires Flash to be enabled

Used to be enabled in most desktop browsers
Deprecated in modern browsers

Also requires a user gesture
Not super convenient

19 of 42

Flash

https://zeroclipboard.github.io/

20 of 42

Flash

https://github.com/zeroclipboard/zeroclipboard

21 of 42

Internet Explorer 9-11

��window.clipboardData.setData("Text", text);�window.clipboardData.setData("URL", url);

https://msdn.microsoft.com/en-us/windows/ms536744(v=vs.71)

22 of 42

Internet Explorer 9-11

23 of 42

Internet Explorer 9-11

��window.clipboardData.getData("Text");�window.clipboardData.getData("URL");

https://msdn.microsoft.com/en-us/windows/ms536436(v=vs.71)

24 of 42

document.execCommand("copy")

Triggers a copy event�for the current selection�“as if the user initiated it”.

25 of 42

document.execCommand("copy")

26 of 42

document.execCommand("copy")

📋

27 of 42

document.execCommand("copy")

https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript

28 of 42

document.execCommand("copy")

�<textarea id="bar">Mussum ipsum cacilds...</textarea>���<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">� Cut to clipboard�</button>

https://clipboardjs.com/

29 of 42

document.execCommand("copy")

function copy(str) {

function listener(e) {

e.clipboardData.setData("text/plain", str);

e.preventDefault();

}

document.addEventListener("copy", listener);

document.execCommand("copy");

document.removeEventListener("copy", listener);

}

Another way to use execCommand is to add a listener on the copy event that sets the data you want.

This also allows you to set data for different MIME types independently, although only text/plain and text/html work right now.

However, it also allows you to shoot yourself in the foot. As I said before, document.execCommand("copy") initiates a copy event as if the user had initiated it. But listening for the copy event will catch actual user-initiated copy events too, so you have to be careful not to overwrite those in any listeners.

Aside: document.addEventListener("copy", …) was possible in browsers long before document.execCommand("copy"); was enabled. That’s how websites were (and still are) able to hijack any test you copied and add “Copied from example.com” at the bottom.

30 of 42

Issues with document.execCommand("copy")

https://github.com/lgarron/clipboard-polyfill/blob/master/experiment/Conclusions.md

31 of 42

Issues with document.execCommand(...)

Synchronous

Blocks the main page
Adds latency if images are sanitized
Permission prompt would block the whole page

Requires access to document
Tricky to use
Buggy

https://github.com/w3c/clipboard-apis/blob/master/explainer.adoc

32 of 42

Issues with document.execCommand(...)

https://w3c.github.io/editing/execCommand.html

33 of 42

Chrome Extension API / Web Extensions

Chrome

https://developer.chrome.com/extensions/declare_permissions

34 of 42

Chrome Extension API / Web Extensions

Firefox

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard

35 of 42

Chrome Extension API / Web Extensions

https://developer.chrome.com/apps/clipboard

36 of 42

Future

37 of 42

Future

Async Clipboard API in all browsers?

38 of 42

Future

More MIME types?

39 of 42

Future

https://w3c.github.io/clipboard-apis/#writing-to-clipboard

40 of 42

Future

Read clipboard?

Listen to clipboard changes?

41 of 42

Future

Contribute to the discussion:��https://github.com/w3c/clipboard-apis

42 of 42

Future

I’ll be keep clipboard-polyfill compatible with what is available.