Tiny Project VII: Chrome Notepad

A simple notepad extension for Chrome.

Photo by Jess Bailey on Unsplash

Chrome Notepad is a simple and intuitive extension designed to help users quickly jot down and manage their notes directly within the Chrome browser.

With a clean and minimal interface, this extension allows users to create, edit, and delete notes seamlessly.

Features

• Add, edit, and delete notes with a few clicks.
• View a list of notes with timestamps and detailed previews.
• All notes are stored locally, ensuring access even when offline.

This extension is perfect for users who need a quick and efficient way to manage their notes without leaving their browser.

Design

I designed about three/four states for the Chrome Notepad extension UI.

The first one was for the empty state when there are no notes that have been saved on the notepad yet.

Chrome Notepad — Empty State UI

The second one was to show the note editor, where users can add anything they want to save to the notepad.

Chrome Notepad — Add Note UI

The third one was for the filled/populated state when one or more notes have been saved to the notepad.

Chrome Notepad — Filled State UI

The other ones were for states such as delete and so on.

Development

I built the extension using HTML, CSS, and JavaScript, like all the previous ones I have built.

If you’re interested in the code, I have added some snippets of the JavaScript functions that are making the extension work below.

JavaScript

Show the empty state view.

    function showEmptyState() {
        emptyState.style.display = 'block';
        notesList.style.display = 'none';
    }

Add a new note.

    function addNote() {
        currentNote = { content: '', date: new Date().toISOString() };
        isEditingExistingNote = false;
        showNoteEditor();
    }

Show the note editor.

    function showNoteEditor() {
        mainContent.style.display = 'none';
        noteEditor.style.display = 'block';
        noteContent.value = currentNote.content;
        originalContent = currentNote.content;
        updateButtonVisibility();
        noteContent.addEventListener('input', updateButtonVisibility);
    }

Save the current note.

    function saveNote() {
        currentNote.content = noteContent.value;
        currentNote.date = new Date().toISOString();

        // Update the notes array with the new or edited note
        const index = notes.findIndex(note => note === currentNote);
        if (index === -1) {
            notes.push(currentNote);
        } else {
            notes[index] = currentNote;
        }

        // Save the notes to Chrome's local storage and hide the note editor
        chrome.storage.local.set({ notes: notes }, () => {
            hideNoteEditor();
        });
    }

Show the notes list view.

    function showNotesList() {
        emptyState.style.display = 'none';
        notesList.style.display = 'block';
    }

Render the notes in the list.

    function renderNotes() {
        notesList.innerHTML = '';

        // If there are no notes, show the empty state
        if (notes.length === 0) {
            showEmptyState();
        } else {
            // Otherwise, show the notes list
            showNotesList();
            // Sort notes by date in descending order
            notes.sort((a, b) => new Date(b.date) - new Date(a.date));
            // Create a card for each note and add it to the notes list
            notes.forEach((note, index) => {
                const noteCard = document.createElement('div');
                noteCard.className = 'note-card';
                noteCard.innerHTML = `
                    <div class="note-content">${note.content}</div>
                    <div class="note-date">${formatDate(note.date)}</div>
                `;
                // Add click event to edit the note when the card is clicked
                noteCard.addEventListener('click', () => editNote(index));
                notesList.appendChild(noteCard);
            });
        }
    }

Edit an existing note.

    function editNote(index) {
        currentNote = notes[index];
        isEditingExistingNote = true;
        showNoteEditor();
    }

Delete the current note.

    function deleteNote() {
        const index = notes.findIndex(note => note === currentNote);
        if (index !== -1) {
            notes.splice(index, 1);
            // Save the updated notes to Chrome's local storage and hide the note editor
            chrome.storage.local.set({ notes: notes }, () => {
                hideNoteEditor();
            });
        }
    }

Hide the note editor and return to the main view.

    function hideNoteEditor() {
        noteEditor.style.display = 'none';
        mainContent.style.display = 'block';
        noteContent.removeEventListener('input', updateButtonVisibility);
        renderNotes();
    }

Installation

I submitted the extension for review, and it has been published publicly, so you can install Chrome Notepad today and add it to your Chrome browser.

Demo

I recorded a short video to show how the Chrome Notepad extension works.

Chrome Notepad — Demo

Hi, thanks for reading this piece! I’m Soliudeen Ogunsola. If you find this article interesting and want to connect with me, you can follow me on X (formerly known as Twitter) or check me out on LinkedIn.