Snippert Chrome Extension

Snippert is a lightweight Chrome extension designed to save time and reduce repetitive typing by allowing users to create text snippets that expand automatically using keyboard shortcuts.

This tool was inspired by my work in 2023 as an Administrative Assistant at Torres Automotive Group, where managing inventory and updating new car information involved a lot of repetitive typing. Snippert was created to make this process faster and more efficient.

⚠️ Note: I was unable to deploy or use the extension at the dealership due to installation restrictions, but the extension is fully functional and ready for personal use.

Live Demo

Adding a Snippet

Expanding a Snippet

Project Structure

• popup.html — UI for adding and managing snippets
• snipper.js — Handles popup logic
• snipper.css — Styles the popup
• content.js — Injected script for live snippet expansion
• manifest.json — Extension metadata and permissions

Features

• Create Snippets: Add custom text snippets with abbreviations for fast expansion.
• Keyboard Shortcut Expansion: Expand snippets using Ctrl + Space (Windows/Linux) or Cmd + Shift + Space (Mac).
• Supports Dynamic Fields: Automatically attaches to new text inputs and textareas added to a page.
• Persistent Storage: Snippets are saved in Chrome's sync storage, so they remain across sessions and devices.
• Manage Snippets: Easily view, add, and delete snippets from a simple UI.

Installation

1. Clone or download the repository.
2. Open Chrome and go to chrome://extensions/.
3. Enable Developer Mode (toggle switch in the top-right corner).
4. Click Load unpacked and select the extension's folder.
5. The extension is now active and ready to use.

Usage

1. Open the Snippert popup.
2. Add a new snippet by entering the Abbreviation and Content, then click Add.
3. In any text input or textarea, type your abbreviation and press the keyboard shortcut to expand it.
4. Delete snippets from the list by clicking the x button next to each snippet.

Code Highlights

• Dynamic Listener Attachment: Uses a MutationObserver to attach listeners to new inputs dynamically.
• Persistent Snippets: Stores all expansions using chrome.storage.sync for cross-device access.

Future Improvements

• Add import/export functionality for snippets.
• Evaluate Expressions: If a snippet starts with =, it can evaluate JavaScript expressions on-the-fly.
• Add support for rich text and formatting in expansions.
• Add customizable shortcuts for different snippets.
• Add snippet categories for better organization.