Barcode Studio

Barcode Studio is a Chrome extension (Manifest V3) that generates QR codes and linear barcodes from the toolbar popup. Everything runs locally in the browser—your payload is not sent to a server.

What it does

Use the extension icon to open a popup where you can:

• Choose a symbology (QR code or linear formats such as CODE128, CODE39, EAN-13, EAN-8, UPC-A, ITF-14, Codabar).
• Enter payload text—or, for QR, switch to Wi‑Fi mode to build a standard WIFI:… string.
• Tune QR options (error correction, quiet margin, colors, export size) or linear options (quiet margin, human-readable text under bars).
• Preview the barcode, then move to the Export tab to copy or download.
• Export as PNG, JPEG, WebP, or SVG; optional data URL copy; configurable filename patterns.
• Batch export: multiple lines → ZIP of files using the same format and file type.

The UI uses Create and Export tabs, light/dark/system theme, and an About panel (info icon) with privacy notes and links to report issues or request features.

Privacy

Generation uses JavaScript libraries inside the extension. Data you type stays on your machine unless you explicitly copy or download it. There is no backend service for encoding.

Tech stack

Area	Technology
UI	Vue 3 (Composition API, <script setup>)
Build	Vite 7 + @crxjs/vite-plugin
QR	qrcode
Linear	jsbarcode
Batch ZIP	jszip
Icons	sharp (dev script to rasterize SVG)

Repository layout

├── manifest.json              # MV3 manifest (name, permissions, commands)
├── vite.config.js
├── scripts/generate-icons.mjs # PNG icons from public/icons/barcode.svg
├── public/icons/
├── src/
│   ├── background/index.js    # Service worker: context menu, command, storage prefill
│   └── popup/                 # Vue popup app
│       ├── App.vue
│       ├── main.js
│       ├── constants.js
│       ├── composables/useBarcodeGenerator.js
│       ├── components/
│       └── styles/
└── dist/                      # Production build output (after npm run build)

Development

Prerequisites

• Node.js (LTS recommended)
• npm

Install

npm install

Run in dev (HMR for the popup)

npm run dev

Follow the URL or instructions from the Vite / CRX plugin output to load the extension in developer mode.

Production build

npm run build

Output is written to dist/. That folder is what you Load unpacked in Chrome or zip for the Chrome Web Store.

Regenerate toolbar icons

npm run icons

Load the extension locally

1. Run npm run build.
2. Open chrome://extensions.
3. Turn on Developer mode.
4. Click Load unpacked and select the dist directory.

Keyboard shortcut

The manifest defines a command Queue current tab URL (suggested: Ctrl+Shift+U / ⌘⇧U on Mac). Assign or change it under Chrome → Extensions → Keyboard shortcuts (chrome://extensions/shortcuts). When triggered, the active tab’s HTTP(S) URL is stored; opening the popup and using Use tab URL applies it.

Context menu

With text selected on a page, the context menu item “Use selection as barcode text” stores the selection so the popup can pick it up (same storage pattern as the tab-URL queue).

Permissions (why they exist)

Permission	Purpose
storage	Save settings, recent values, queued URL/selection
clipboardWrite	Copy image / data URL to clipboard
contextMenus	“Use selection as barcode text”
activeTab	Read the active tab URL when using tab URL or the keyboard command

Contributing

Issues and feature requests are welcome via GitHub Issues.

---

Barcode Studio — QR & linear barcodes in one click from the toolbar.