Get started with 33% off your first certification using code: 33OFFNEW

Build a clipboard manager in Electron

2 min read
Published on 26th September 2023
Build a clipboard manager in Electron

Electron JS offers a robust platform to build native desktop applications using JavaScript, HTML, and CSS. In this tutorial, we'll create a simple clipboard manager using Electron that will allow users to store and access multiple clipboard entries.

1. Setting Up Electron

Before starting, ensure you have Node.js installed.

Step 1: Initialize a new Node.js application:

mkdir electron-clipboard-manager
cd electron-clipboard-manager
npm init -y

Step 2: Install Electron:

npm install electron --save-dev

2. Creating the Main Process

Create a new file main.js. This file will contain the logic for the main process of the Electron app.

In main.js, set up a basic window:

const { app, BrowserWindow } = require('electron');

let mainWindow;

app.on('ready', function() {
    mainWindow = new BrowserWindow({
        width: 600,
        height: 400,
        webPreferences: {
            nodeIntegration: true
        }
    });
    mainWindow.loadFile('index.html');
});

app.on('window-all-closed', function() {
    app.quit();
});

3. Building the Render Process

Create an index.html file:

<!DOCTYPE html>
<html>
<head>
    <title>Clipboard Manager</title>
</head>
<body>
    <h1>Clipboard Manager</h1>
    <button id="copy">Copy Text</button>
    <button id="paste">Paste Text</button>
    <div id="clipboard-contents"></div>

    <script src="renderer.js"></script>
</body>
</html>

Now, let's handle the clipboard operations in the renderer process. Create a renderer.js:

const { clipboard } = require('electron');

const copyButton = document.getElementById('copy');
const pasteButton = document.getElementById('paste');
const clipboardContents = document.getElementById('clipboard-contents');

copyButton.addEventListener('click', () => {
    const textToCopy = 'Hello, Electron!';
    clipboard.writeText(textToCopy);
    clipboardContents.textContent = 'Copied: ' + textToCopy;
});

pasteButton.addEventListener('click', () => {
    const pastedText = clipboard.readText();
    clipboardContents.textContent = 'Pasted: ' + pastedText;
});

4. Storing Multiple Clipboard Entries

For simplicity, let's use an array to store multiple clipboard entries:

Modify the renderer.js:

// ... other code ...

let clipboardHistory = [];

copyButton.addEventListener('click', () => {
    const textToCopy = 'Hello, Electron!';
    clipboard.writeText(textToCopy);
    clipboardHistory.push(textToCopy);
    renderClipboardHistory();
});

pasteButton.addEventListener('click', () => {
    const pastedText = clipboard.readText();
    clipboardHistory.push(pastedText);
    renderClipboardHistory();
});

function renderClipboardHistory() {
    clipboardContents.innerHTML = clipboardHistory.map(item => `<p>${item}</p>`).join('');
}

5. Adding Styles and Polishing (Optional)

Add some basic styles to your index.html to make the application look better:

<head>
    <!-- ... -->
    <style> body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 2em;
        }
        button {
            margin: 1em;
            padding: 0.5em 1em;
        } </style>
</head>

6. Running the App

In your package.json, modify the "scripts" section:

"scripts": {
    "start": "electron main.js"
}

Now, run the app:

npm start

Congratulations, you've built a basic clipboard manager using Electron JS! From here, you can expand the functionality, integrate with cloud services for synchronized clipboards across devices, or add more advanced features like clipboard history search. Happy coding!