クリップボードへ書き込み

クライアントブラウザ向け

ClipboardインタフェースのwriteText関数に指定した文字列がクリップボードに書き込まれる。
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

利用にはclipboard-write権限が必要だが、ページがアクティブであれば自動で付与がされる。

navigator.clipboard.writeText('hoge');

writeTextはPromiseを返却する。

navigator.clipboard.writeText('hoge')
    .then(() => {
        console.log('Success');
    })
    .catch((e) => {
        console.error(e.message)
    });

以下のようにawaitで結果を受け取ることも可能。

try {
    await navigator.clipboard.writeText('hoge');
    console.log('Success');
} catch (e) {
    console.error('Failed: ', e.message);
}

Chromeの開発者ツール向け

copy関数というChromeの開発者ツールのコンソール上でのみ動作するクリップボードへ書き込める関数がある。

copy('hoge');

writeText関数はページがアクティブの場合に利用可能であるためChromeの開発者ツール上のコンソールでは利用することができない。

Uncaught (in promise) DOMException: Document is not focused.

そのため、開発者ツール上であればcopy関数を使用するべきである。

クリップボードから読み込み

ClipboardインタフェースのreadText関数を実行するとクリップボードの内容を読み込まれる。
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/readText

ただし、利用にはclipboard-read権限が必要であり、clipboard-write権限と違ってクライアントユーザが権限の許可を手動で行わなければならない。

navigator.clipboard.readText();

readTextはPromiseを返却する。

navigator.clipboard.readText()
    .then((text) => {
        console.log(text);   
    })
    .catch((e) => {
        console.error(e.message)
    });

以下のようにawaitで結果を受け取ることも可能。

try {
    await navigator.clipboard.writeText(location.href);
    console.log('Page URL copied to clipboard');
} catch (err) {
    console.error('Failed to copy: ', err);
}