I’m trying to figure out how to make a paste action happen when someone clicks a button or menu item on my webpage. I know this might be tricky because of security reasons - browsers don’t usually let websites access clipboard data directly.
But here’s what’s interesting: Google Docs can do this somehow. When you right-click in a Google Docs document and choose “Paste” from their custom menu, it actually pastes content that was copied from completely different programs like Paint or Word. This works in Chrome even with Flash disabled and all extensions turned off.
I can handle paste events when users press Ctrl+V because that triggers the normal paste event. But I can’t figure out how to either read clipboard contents or trigger a real paste action when someone just clicks a custom button or menu item.
Has anyone figured out how Google Docs manages to do this? What’s the secret technique they’re using to access clipboard data through a simple click action?
The trick is that clipboard access needs a trusted user event, but it doesn’t have to be the actual paste operation. I found this out working on something similar - you can capture the click event on your custom button and call the Clipboard API right in that handler. The browser sees the button click as enough user interaction to grant clipboard permissions. There’s a timing window though - the clipboard read has to happen synchronously in the click handler, not after any async stuff. Google Docs probably combines this with their own clipboard history, so they might be reading from their internal cache instead of the system clipboard sometimes. Bottom line: any real user interaction can authorize clipboard access, not just keyboard shortcuts.
google docs likely uses the clipboard api - navigator.clipboard.readText() - but it needs user interaction first. the old hidden textarea method is kinda obsolete now. modern browsers need some kind of user gesture for clipboard stuff to work.
I’ve hit this exact issue recently. Google Docs uses the modern Clipboard API plus smart timing around user clicks. When you click their paste button, they call navigator.clipboard.readText() or navigator.clipboard.read() right inside the click handler - this keeps the “user activation” that browsers require for clipboard access. The click counts as a user gesture, so you can grab clipboard content immediately in that event handler. But you need HTTPS, and some browsers still ask permission the first time. You’ll also need to handle the promises and add fallbacks for older browsers. Way more reliable than the old execCommand method.