How to Quickly Find Out What’s in Your Clipboard

JavaScript Techniques to Access Clipboard:

1.Using the Clipboard API (navigator.clipboard.readText):

The Clipboard API provides a secure way to read from and write to the clipboard. Here's how you can use navigator.clipboard.readText() to quickly retrieve text data from the clipboard.

async function getClipboardContent() {
    try {
        const text = await navigator.clipboard.readText();
        console.log('Clipboard content:', text);
        alert('Clipboard content: ' + text);
    } catch (err) {
        console.error('Failed to read clipboard contents:', err);
    }
}

// Trigger the function
getClipboardContent();

2. Using a Button to Fetch Clipboard Content:
Sometimes, you may want to trigger clipboard reading only when the user clicks a button. Here's how you can do it:

<button onclick="getClipboardContent()">Show Clipboard Content</button>

<script>
async function getClipboardContent() {
    try {
        const text = await navigator.clipboard.readText();
        alert('Clipboard content: ' + text);
    } catch (err) {
        console.error('Failed to read clipboard contents:', err);
    }
}
</script>

3. Handling Permissions for Clipboard Access:
The Clipboard API requires user permission, so it’s important to handle possible permission issues gracefully. Here’s how to ensure you have permission before attempting to read or write to the clipboard:

async function getClipboardContent() {
    try {
        // Request permission to read from the clipboard
        const readPermission = await navigator.permissions.query({ name: 'clipboard-read' });
        if (readPermission.state === 'granted' || readPermission.state === 'prompt') {
            const text = await navigator.clipboard.readText();
            alert('Clipboard content: ' + text);
        } else {
            alert('Clipboard read access denied');
        }
    } catch (err) {
        console.error('Failed to read clipboard contents:', err);
    }
}

async function writeToClipboard(text) {
    try {
        // Request permission to write to the clipboard
        const writePermission = await navigator.permissions.query({ name: 'clipboard-write' });
        if (writePermission.state === 'granted' || writePermission.state === 'prompt') {
            await navigator.clipboard.writeText(text);
            alert('Text copied to clipboard: ' + text);
        } else {
            alert('Clipboard write access denied');
        }
    } catch (err) {
        console.error('Failed to write to clipboard:', err);
    }
}

Example of writing to the clipboard

<button onclick="writeToClipboard('Hello, World!')">Copy "Hello, World!" to Clipboard</button>

Complete Example Code
You can find the full example code to quickly find out what’s in your clipboard here on GitHub Gist.

If this article made your development life a bit easier, tap that heart ❤️ and stick around for more JavaScript magic!