Sidebar Calc

A fast scientific calculator that lives in your browser's side panel.

Do quick arithmetic and scientific math right next to the page you're reading — no extra tab, no separate app, no floating window.

Install

• Chrome: Sidebar Calc on the Chrome Web Store
• Opera: Sidebar Calc on Opera Add-ons

Prefer to build it yourself? See Development.

Features

• Side panel, always at hand — opens beside the current page, not in a separate tab or window
• Two modes — switch between a simple everyday calculator and a full scientific calculator
• Scientific functions — trigonometric and inverse functions, logarithms (log, ln), powers, roots, factorials, percentages, parentheses, and the π and e constants
• Degrees & radians — toggle angle units with a visible degree marker for trigonometry
• Calculation history — reopen and reuse previous expressions with one click
• Copy results — one-click copy of any answer to the clipboard
• Light & dark themes
• Localized UI — English, Spanish, French, German, and Russian
• Privacy-friendly — no tracking, no network requests; the Chrome build needs only the sidePanel permission

Keyboard shortcuts

Browser	Open calculator
Chrome	Ctrl+Shift+L / Cmd+Shift+L
Opera	Ctrl+Shift+Y / Cmd+Shift+Y

Shortcuts can be remapped from the extension's settings and your browser's shortcut manager (chrome://extensions/shortcuts).

Tech stack

• React 18 + TypeScript
• math.js for expression parsing and evaluation
• Tailwind CSS for styling, rendered inside a Shadow DOM via react-shadow
• webpack build, packaging Chrome and Opera (Manifest V3) targets
• Jest for tests, ESLint + Prettier for code quality

Development

Prerequisites

• Node.js (LTS recommended)
• pnpm
• Chrome 114+ for the Chrome side panel build

Setup

pnpm install

Build

pnpm build:chrome   # build the Chrome extension
pnpm build:opera    # build the Opera extension
pnpm build:all      # build both targets

Webpack writes the unpacked extension to dist/.

Load the unpacked extension

Chrome

1. Run pnpm build:chrome.
2. Open chrome://extensions/ and enable Developer mode.
3. Click Load unpacked and select the dist/ folder.
4. Open the calculator from the toolbar icon or with Ctrl+Shift+L / Cmd+Shift+L.

Opera

1. Run pnpm build:opera.
2. Open opera://extensions/ and enable Developer mode.
3. Click Load unpacked and select the dist/ folder.
4. Enable the extensions sidebar, then open the calculator with Ctrl+Shift+Y / Cmd+Shift+Y.

Quality checks

pnpm lint   # run ESLint
pnpm test   # run the Jest test suite

Project structure

src/
├── manifest.json        # Chrome (Manifest V3) manifest
├── manifestOpera.json   # Opera (Manifest V3) manifest
├── sidebar/             # React side panel calculator UI
├── worker/              # extension service worker
├── utils/               # calculator, formatting, i18n, and browser helpers
├── assets/              # icons and fonts
└── _locales/            # localized extension strings (en, es, fr, de, ru)
store/                   # localized store listing descriptions

Localization

The UI and store listings ship in English, Spanish, French, German, and Russian.

• Extension strings live in src/_locales/<locale>/messages.json.
• Store descriptions live in store/<locale>/description.md.

Contributions that add a new locale or improve an existing translation are welcome — add a matching messages.json (and, ideally, a store description) and keep the keys in sync with src/_locales/en/messages.json.

Contributing

Issues and pull requests are welcome. To propose a change:

1. Fork the repository and create a branch for your change.
2. Run pnpm lint and pnpm test before opening a PR.
3. Keep commits focused and describe the user-facing impact.

License

Released under the MIT License.