Quick Calculator

Quick Calculator is a browser extension built to remove the constant friction of opening a separate calculator while working with numbers in dashboards, tables, reports or spreadsheets. It was originally created to solve a recurring productivity issue at my workplace, where quick arithmetic was frequent but context-switching slowed everyone down. With Quick Calculator, calculations happen directly on the webpage, keeping you focused and in flow.

---

Features

• Direct number detection from any webpage when you double-click a value
• Floating calculator panel that appears beside your cursor
• Editable calculation history for revisiting or adjusting previous steps
• Undo and redo support through standard keyboard shortcuts
• Keyboard-first interaction for fast input without relying on the mouse
• Chained operations across multiple numbers on the page
• Robust error handling to prevent invalid input from interrupting work
• Quick copy action for instantly copying the result

---

How It Works

1. Double-click any number on a webpage to activate the calculator.
2. Choose an operation such as addition, subtraction, multiplication, division or percentage.
3. Double-click the next number to continue the calculation.
4. Copy the result or begin a new sequence as needed.

The calculator appears near your cursor and closes automatically when you're done.

---

Keyboard Shortcuts

• Ctrl + Z – Undo the last step
• Ctrl + Y – Redo the last undone step
• Ctrl + R – Reset the calculator
• Escape – Close the calculator panel

---

Tech Stack

Quick Calculator is built using:

• React 19
• TypeScript
• Tailwind CSS
• Motion for animations
• WXT (Web Extension Toolkit) for packaging and development

---

Development Setup

Clone the project and install dependencies:

pnpm install

Start development mode:

pnpm dev

Build for production:

pnpm build

The project structure follows clean patterns to make contributions and improvements straightforward.

---

Installation

Chrome Web Store

Search for Quick Calculator in the Chrome Web Store and click Add to Chrome.

Manual Installation

1. Download the extension package
2. Open Chrome extensions
3. Enable Developer mode
4. Select Load unpacked
5. Choose the project folder

---

Contributing

Suggestions, improvements and contributions are welcome. If you’d like to extend the tool, feel free to open an issue or submit a pull request.

---

Support

For feedback, questions or collaboration inquiries, reach out at: [email protected]

---

License

MIT License. You’re free to use, modify and distribute with proper attribution.

---