Base64 Encoder / Decoder

A lightweight, offline-capable Chrome extension for encoding and decoding Base64 — with full Unicode support, URL-safe mode, file encoding, and MIME line-wrapping.

Part of the DevTools Browser Extensions suite — 50 developer-focused tools built with vanilla JS, Manifest V3, and zero unnecessary dependencies.

---

Features

Text Mode

• Encode any Unicode text to Base64 (emoji, CJK, accented characters all handled correctly)
• Decode Base64 strings back to readable text
• Auto-detect mode — paste anything and the extension figures out the direction
• Swap output back to input with one click for chaining operations
• Paste from clipboard button for fast one-click workflows
• Character count displayed live as you type

File Mode

• Drag-and-drop any file onto the drop zone, or click to browse
• Encodes the entire file as Base64 (images, PDFs, ZIPs — any binary format)
• File name and size displayed before encoding
• Copy or download the output as a .txt file

Options (apply to both modes)

Option	What it does
URL-safe	Replaces + → - and / → _, strips = padding (RFC 4648 §5)
Wrap at 76	Inserts a newline every 76 characters (MIME / RFC 2045 compatible)
Auto-detect	Heuristically decides encode vs decode when input is ambiguous

General

• Dark / light mode toggle — preference saved across sessions
• Fully offline — no data ever leaves your browser
• Keyboard shortcuts: Escape to clear, Ctrl/Cmd+Enter to encode

---

Why not just use btoa() directly?

The browser's built-in btoa() only accepts characters with code points 0–255 (Latin-1). Any character above that range — accented letters like é, CJK characters, or emoji — throws a DOMException. This extension uses the standard UTF-8 round-trip trick (encodeURIComponent → byte substitution → btoa) to handle all Unicode input correctly, matching the output of Python's base64 module and Node's Buffer.from(str, 'utf8').toString('base64').

---

Installation

From Source (Developer Mode)

1. Clone or download this repository
2. Open Chrome and navigate to chrome://extensions
3. Enable Developer mode (top-right toggle)
4. Click Load unpacked
5. Select the base64-encoder-decoder/ folder
6. Pin the extension from the puzzle-piece menu in your toolbar

Chrome Web Store

Coming soon.

---

File Structure

base64-encoder-decoder/
├── manifest.json        # MV3 manifest — only "storage" permission required
├── popup.html           # UI — text tab, file tab, options bar
├── popup.js             # All logic — encode, decode, file handling, auto-detect
├── popup.css            # Theming via CSS custom properties (dark/light)
├── icons/
│   ├── icon.svg         # Master source — edit this, re-export PNGs
│   ├── icon16.png
│   ├── icon32.png
│   ├── icon48.png
│   └── icon128.png
└── README.md

---

Permissions

Permission	Why it's needed
storage	Persists the dark/light mode preference via chrome.storage.local
clipboardRead	Required for the Paste button (navigator.clipboard.readText()). Writing to the clipboard needs no permission; reading is gated because clipboard content may contain sensitive data (passwords, tokens, etc.)

No host permissions, activeTab, or scripting are requested. This extension never reads from or modifies any web page.

---

Keyboard Shortcuts

Shortcut	Action
Escape	Clear input and output
Ctrl / Cmd + Enter	Encode (or auto-detect if enabled)

---

Technical Notes

• Unicode encoding — uses the encodeURIComponent + atob/btoa round-trip pattern for correct UTF-8 Base64
• URL-safe Base64 — RFC 4648 §5 alphabet (- and _), no padding
• File encoding — FileReader.readAsDataURL() with data URI prefix stripping
• Auto-detect — character set validation + length divisibility heuristic, debounced at 600ms
• Download — Blob + URL.createObjectURL() + immediate revokeObjectURL() for memory safety
• No external libraries — every feature uses native browser APIs only

---

Support the Developer

If this extension saved you time, a coffee goes a long way. ☕

Platform	Link
☕ Buy Me a Coffee	buymeacoffee.com/ejcenteno
💖 GitHub Sponsors	github.com/sponsors/ejcenteno
🍵 Ko-fi	ko-fi.com/ejcenteno
💸 PayPal	paypal.me/ejcenteno

---

Part of the DevTools Extensions Suite

#	Extension	Category
01	Text Case Converter	Text
02	Base64 Encoder / Decoder	Encoding
03	JWT Encoder / Decoder	Encoding
04	JSON Formatter & Validator	Data
…	…	…

View the full suite →

---

License

MIT — do whatever you want with it, attribution appreciated.