Localhost QR - Chrome Extension

Instantly test your local development sites on mobile devices with QR codes

Generate QR codes for localhost URLs and test your websites on mobile/tablet devices over LAN. No more typing long localhost URLs manually!

---

Features

• Smart URL Conversion - Automatically converts localhost, 127.0.0.1, and 0.0.0.0 to your LAN IP
• Instant QR Generation - One-click QR code creation for any local development URL
• Automatic IP Detection - Uses WebRTC to detect your local network IP automatically
• Manual IP Fallback - Save your IP manually if auto-detection doesn't work
• One-Click Copy - Copy converted URL to clipboard instantly
• Lightweight & Fast - No external servers, works completely offline
• Clean UI - Modern, minimal interface with smooth interactions
• Privacy First - No data collection, no tracking, no external requests

---

How It Works

1. Start your local development server (React, Python, PHP, Java, etc.)
2. Click the extension icon in Chrome toolbar
3. Scan the QR code with your mobile device
4. Test your site on mobile instantly!

---

Compatible With

Works with ALL local development servers and frameworks:

Frontend Frameworks

• React, Vue.js, Angular, Svelte
• Next.js, Nuxt.js, Gatsby, Remix
• Vite, Webpack Dev Server, Parcel

Backend Frameworks

• Node.js: Express, Nest.js, Koa
• Python: Flask, Django, FastAPI
• PHP: Laravel, Symfony, XAMPP, WAMP
• Java: Spring Boot, Servlets, Tomcat
• Ruby: Ruby on Rails, Sinatra
• .NET: ASP.NET Core, Blazor
• Go: Gin, Echo, Fiber

Full-Stack Setups

• MERN (MongoDB + Express + React + Node)
• MEAN, MEVN, LAMP, Django+React, Laravel+Vue

Static Site Generators

• Jekyll, Hugo, Eleventy, Hexo, MkDocs

And literally ANY localhost server on ANY port!

---

Installation

From Chrome Web Store (Recommended)

1. Visit the Chrome Web Store page
2. Click "Add to Chrome"
3. Start using immediately!

Manual Installation (For Development)

1. Clone this repository:

   git clone https://github.com/nikhildaiya/localhost-qr.git
   cd localhost-qr

2. Open Chrome and navigate to chrome://extensions/

3. Enable "Developer mode" (toggle in top-right corner)

4. Click "Load unpacked"

5. Select the extension directory

6. The extension is now installed!

---

Usage

Basic Usage

1. Start your local development server

   # Example: React app
   npm start
   # Runs on localhost:3000

2. Open the page in Chrome

   http://localhost:3000
   

3. Click the Localhost QR extension icon

4. Scan the QR code with your mobile device camera

5. Done! Your site opens on mobile

Manual IP Configuration

If automatic IP detection doesn't work:

1. Click the extension icon
2. Look for "IP Not Found" section
3. Enter your LAN IP (e.g., 192.168.1.5)
4. Click "Save"
5. Click "Refresh" to regenerate QR code

Finding your IP:

• Windows: ipconfig in Command Prompt (look for IPv4)
• Mac/Linux: ifconfig or ip addr in Terminal (look for inet)

---

Requirements

• Chrome/Edge browser (Chromium-based)
• Both devices on same Wi-Fi network (PC and mobile)
• Local development server running

Supported URL Formats

✅ http://localhost:3000
✅ http://127.0.0.1:8080
✅ http://0.0.0.0:5000
✅ http://localhost:3000/path/to/page
✅ http://localhost:3000?query=params
✅ https://localhost:443 (SSL)

❌ file:///path/to/file.html (Use Live Server or HTTP server instead)

---

Project Structure

localhost-qr/
├── manifest.json
├── popup/
│   ├── popup.html
│   ├── popup.css
│   └── popup.js
├── scripts/
│   ├── getActiveTabUrl.js
│   ├── ipResolver.js
│   ├── qrGenerator.js
│   ├── storage.js
│   └── urlConverter.js
├── libs/
│   └── qrcode.min.js
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   ├── icon128.png
│   └── grid.png
└── README.md

---

How It Works

Technical Overview

1. URL Detection

   • Reads current tab URL using Chrome Tabs API
   • Validates if URL is localhost/127.0.0.1/0.0.0.0

2. IP Resolution

   • Uses WebRTC's RTCPeerConnection to detect local network IP
   • Filters for private IP ranges (192.168.x.x, 10.x.x.x, 172.x.x.x)
   • Falls back to manual input if auto-detection fails

3. URL Conversion

   • Replaces localhost hostname with detected LAN IP
   • Preserves port number, path, and query parameters
   • Example: http://localhost:3000/admin?x=1 → http://192.168.1.5:3000/admin?x=1

4. QR Generation

   • Uses qrcode.min.js library
   • Generates QR code from converted URL
   • Handles errors for URLs that are too long

5. Storage

   • Uses Chrome Storage API to persist manual IP address
   • Data stored locally, never transmitted

---

Privacy & Security

• ✅ No data collection - Zero analytics, zero tracking
• ✅ No external servers - Everything runs locally
• ✅ No network requests - Works completely offline
• ✅ Minimal permissions - Only uses necessary Chrome APIs

Permissions Used

Permission	Purpose
tabs	Read current tab URL for QR generation
storage	Save optional manual IP address locally
host_permissions	Required to read URLs on web pages for QR generation

---

Troubleshooting

QR Code Not Working

Problem: Mobile device can't access the site after scanning

Solutions:

1. ✅ Ensure both devices are on the same Wi-Fi network
2. ✅ Check that your development server is running
3. ✅ For Python Flask, use app.run(host="0.0.0.0") to accept network connections
4. ✅ Check firewall settings - allow incoming connections on the port
5. ✅ Try manual IP input if auto-detection fails

IP Detection Failed

Problem: Extension shows "IP Not Found"

Solutions:

1. ✅ Click "Manual IP Input"
2. ✅ Find your IP: ipconfig (Windows) or ifconfig (Mac/Linux)
3. ✅ Enter IP (e.g., 192.168.1.5)
4. ✅ Click "Save" and "Refresh"

Very Long URLs

Problem: QR code fails to generate

Solutions:

1. ✅ Shorten your URL path
2. ✅ Remove unnecessary query parameters
3. ✅ Use URL shortener for the converted URL
4. ✅ Copy URL manually instead (use copy button)

---

Use Cases

For Developers

• 🎯 Test responsive designs on real devices
• 🎯 Debug mobile-specific issues
• 🎯 Preview sites before deployment
• 🎯 Quick UI/UX testing on tablets

For Designers

• 🎨 Preview designs on actual devices
• 🎨 Test touch interactions
• 🎨 Verify mobile layouts
• 🎨 Share work-in-progress with clients

For QA Testers

• 🧪 Mobile compatibility testing
• 🧪 Cross-device testing
• 🧪 Accessibility testing on mobile
• 🧪 Performance testing on real devices

---

FAQ

Does this work on mobile browsers?

The extension itself is Chrome-only, but the QR codes work with any mobile browser (Safari, Chrome, Firefox, etc.) on any mobile device (iPhone, Android, iPad, tablets).

Do I need to install anything on my mobile?

No! Just use your device's camera to scan the QR code. Most modern phones have built-in QR scanners.

Can I use this with HTTPS/SSL localhost?

Yes! The extension preserves the protocol. If you're running https://localhost:443, it will convert to https://YOUR_IP:443.

Does this work with Docker containers?

Yes! As long as the container port is mapped to localhost (e.g., -p 3000:3000), it will work.

Will this work on corporate/enterprise networks?

It depends. Some enterprise networks block WebRTC or restrict local network access. Use the manual IP fallback if auto-detection fails.

Is my data safe?

Absolutely! The extension doesn't collect, transmit, or store any data except the optional manual IP (stored locally in your browser only).

---

Acknowledgments

• QRCode.js - QR code generation library
• Google Fonts - Roboto font
• Bootstrap Icons - UI icons
• Chrome Extensions documentation and community

---

📧 Contact & Support

• Email: localhostqr@gmail.com
• Chrome Web Store: Leave a review

---

Show Your Support

If this extension helped you, please:

• Star this repository
• Leave a review on Chrome Web Store
• Share on social media

---

Made with ❤️ by a developer, for developers

---

Pro Tips

For React Developers:

# Make sure your dev server listens on 0.0.0.0
DANGEROUSLY_DISABLE_HOST_CHECK=true npm start

For Python Flask:

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

For PHP (XAMPP):

# Already configured correctly by default!
# Access via: localhost/your-project

For Java Spring Boot:

# application.properties
server.address=0.0.0.0
server.port=8080

For Next.js:

# Add to package.json
"dev": "next dev -H 0.0.0.0"

---

Happy Testing! 📱