Take a look at what is on the cliboard using a button callback to get details async function getClipboardContents try const clipboardItems await navigator clipboard read for const clipboardItem of clipboardItems for const type of clipboardItem types const blob await clipboardItem getType type console log type type console log URL createObjectURL blob catch err console error err name err message let span document createElement span document body appendChild span span innerHTML Click Me span style border 1px solid blue span onclick function getClipboardContents console log ready Same as before but maps the keyboard paste shortcut keys Note make sure you focus select the output scn otherwise it ll think you want to paste into into the edit window document body style height 200px async function getClipboardContents try const clipboardItems await navigator clipboard read for const clipboardItem of clipboardItems for const type of clipboardItem types const blob await clipboardItem getType type console log type type console log URL createObjectURL blob catch err console error err name err message Watch for pastes window addEventListener paste async e getClipboardContents console log press cntrl space Get the pasted image if you have one in the clipboard and show it on screen document body style 400px let img document createElement img document body appendChild img img id pastedImg img style width 200px img style height 200px img style border 1px solid black let button document createElement button document body appendChild button button id button button innerHTML Click Me to Paste Image button style border 1px solid blue button onclick async getClipboardImage console log ready async function getClipboardImage try const clipboardItems await navigator clipboard read console log items Object keys clipboardItems length const blobOutput await clipboardItems 0 getType image png console log window URL createObjectURL blobOutput document getElementById pastedImg src window URL createObjectURL blobOutput catch err console error err name err message Watch for pastes navigator clipboard addEventListener clipboardchange async e const text await navigator clipboard getText console log Updated clipboard contents text The 4 available permissions for Async Clipboard API const PERMISSIONS name clipboard read name clipboard write name clipboard read allowWithoutGesture false name clipboard read allowWithoutGesture true name clipboard write allowWithoutGesture false name clipboard write allowWithoutGesture true Query for each permission s state then watch for changes and update buttons accordingly Promise all PERMISSIONS map descriptor navigator permissions query descriptor then permissions permissions forEach status index let descriptor PERMISSIONS index name permissionName descriptor btn document createElement button btn title Click to request permission btn textContent name Clicking a button re requests that permission btn onclick navigator permissions request descriptor then status console log Permission status state catch err console log Permission denied err If the permission status changes update the button to show it status onchange btn setAttribute data state status state status onchange permbuttons appendChild btn function permissionName permission let name permission name split pop if allowWithoutGesture in permission name permission allowWithoutGesture without gesture with gesture return name Putting an image onto the cliboard easier than saving it to a file sometimes async function loadBlob fileName const fetched await fetch fileName return await fetched blob let button document createElement button document body appendChild button button id button button innerHTML Click Me to Copy Image Onto Clipboard button style border 1px solid blue Write the Chrome logo to the clipboard when clicking Copy button onclick async try const url https upload wikimedia org wikipedia commons 5 53 Google_Chrome_Material_Icon 450x450 png const blobInput await loadBlob url const clipboardItemInput new ClipboardItem image png blobInput await navigator clipboard write clipboardItemInput log Image copied catch e log e console log ready
tListener clipboardchange async e const text await navigator clipboard getText console log Updated clipboard contents text The 4 available permissions for Async Clipboard API const PERMISSIONS name clipboard read name clipboard write name clipboard read allowWithoutGesture false name clipboard read allowWithoutGesture true name clipboard write allowWithoutGesture false name clipboard write allowWithoutGesture true Query for each permission s state then watch for changes and update buttons accordingly Promise all PERMISSIONS map descriptor navigator permissions query descriptor then permissions permissions forEach status index let descriptor PERMISSIONS index name permissionName descriptor btn document createElement button btn title Click to request permission btn textContent name Clicking a button re requests that permission btn onclick navigator permissions request descriptor then status console log Permission status state catch err console log Permission denied err If the permission status changes update the button to show it status onchange btn setAttribute data state status state status onchange permbuttons appendChild btn function permissionName permission let name permission name split pop if allowWithoutGesture in permission name permission allowWithoutGesture without gesture with gesture return name Putting an image onto the cliboard easier than saving it to a file sometimes async function loadBlob fileName const fetched await fetch fileName return await fetched blob let button document createElement button document body appendChild button button id button button innerHTML Click Me to Copy Image Onto Clipboard button style border 1px solid blue Write the Chrome logo to the clipboard when clicking Copy button onclick async try const url https upload wikimedia org wikipedia commons 5 53 Google_Chrome_Material_Icon 450x450 png const blobInput await loadBlob url const clipboardItemInput new ClipboardItem image png blobInput await navigator clipboard write clipboardItemInput log Image copied catch e log e console log ready