Created
September 29, 2024 16:20
-
-
Save mike-clark-8192/5a3e6e5b69b1f64867d6a3592295024c to your computer and use it in GitHub Desktop.
Browser Clipboard API multi-format and privacy tester
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>HTML Clipboard Tester</title> | |
| <style> | |
| body * { margin-top: 10px; font-family: sans-serif; } | |
| input, select, textarea { font-family: sans-serif; } | |
| table, tr, td, th { border: 1px solid black; border-collapse: collapse; } | |
| tr, td, th { padding: 5px; } | |
| </style> | |
| </head> | |
| <body> | |
| <table> | |
| <tr> | |
| <td>Item 1 Clipboard Format <select id="item1CBFormat"></select></td> | |
| <td>Item 1 Blob MIME Type <select id="item1MimeType"></select></td> | |
| </tr> | |
| <tr> | |
| <td colspan=2><input type="checkbox" id="cbEnableItem2"> Enable Item 2?</td> | |
| </tr> | |
| <tr> | |
| <td>Item 2 Clipboard Format <select id="item2CBFormat"></select></td> | |
| <td>Item 2 Blob MIME Type <select id="item2MimeType"></select></td> | |
| </tr> | |
| </table> | |
| <div> <button id="copyBtn">Copy current timestamp to clipboard</button> </div> | |
| <div> | |
| Status message:<br> | |
| <textarea id="lastmsg" readonly rows="3" cols="120"></textarea> | |
| </div> | |
| <script> | |
| const EXCLUDER_STRING = 'ExcludeClipboardContentFromMonitorProcessing'; | |
| const MIME_TEXT_PLAIN = 'text/plain'; | |
| const MIME_TEXT_X_EXCLUDER = 'text/x-' + EXCLUDER_STRING; | |
| const MIME_TEXT_EXCLUDER = 'text/' + EXCLUDER_STRING; | |
| const MIME_EXCLUDER = EXCLUDER_STRING; | |
| const TEST_FMT_TEXT = 1; | |
| const TEST_FMT_TEXT_EXCLUDE = 2; | |
| const TEST_FMT_EXCLUDE_TEXT = 4; | |
| async function testCopy() { | |
| try { | |
| const isoDatetime = new Date().toISOString(); | |
| const clipboardItems = []; | |
| function makeCBItem(cbFormat, mimeType) { | |
| const blob = new Blob([isoDatetime], { type: mimeType }); | |
| return new ClipboardItem({ [cbFormat]: blob }); | |
| } | |
| const itemNumbers = $('#cbEnableItem2').checked ? [1, 2] : [1]; | |
| for (const itemNumber of itemNumbers) { | |
| const cbFormat = $('#item' + itemNumber + 'CBFormat').value; | |
| const mimeType = $('#item' + itemNumber + 'MimeType').value; | |
| clipboardItems.push(makeCBItem(cbFormat, mimeType)); | |
| } | |
| await navigator.clipboard.write(clipboardItems); | |
| logmsg('Copied: ' + isoDatetime); | |
| } catch (err) { | |
| logmsg('Failed to copy: ' + err); | |
| } | |
| } | |
| function $(selector) { return document.querySelector(selector); } | |
| function $$(selector) { return document.querySelectorAll(selector); } | |
| function logmsg(msg) { document.getElementById('lastmsg').value = msg; } | |
| $('#copyBtn').addEventListener('click', testCopy); | |
| $$('select').forEach(sel => { | |
| sel.innerHTML = ` | |
| <option value="${MIME_TEXT_PLAIN}">${MIME_TEXT_PLAIN}</option> | |
| <option value="${MIME_TEXT_X_EXCLUDER}">${MIME_TEXT_X_EXCLUDER}</option> | |
| <option value="${MIME_TEXT_EXCLUDER}">${MIME_TEXT_EXCLUDER}</option> | |
| <option value="${MIME_EXCLUDER}">${MIME_EXCLUDER}</option> | |
| `; | |
| }); | |
| $('#cbEnableItem2').addEventListener('change', () => { | |
| const enable = $('#cbEnableItem2').checked; | |
| $('#item2CBFormat').disabled = !enable; | |
| $('#item2MimeType').disabled = !enable; | |
| }); | |
| $('#cbEnableItem2').click(); | |
| $('#cbEnableItem2').click(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment