Chrome Custom Devices Manager

Add 22+ desktop device presets to Chrome DevTools with one command. Perfect for testing responsive designs on MacBooks, iMacs, and other desktop resolutions.

Features

• ✅ Safe modification of Chrome Preferences (no core file changes)
• ✅ Multiple installation methods (direct, Vibranium CLI, manual)
• ✅ Cross-platform support (Windows, macOS, Linux)
• ✅ Automatic backup and rollback functionality
• ✅ Proper user agent generation for different device types
• ✅ Support for both portrait and landscape orientations
• ✅ Chrome process detection and safety warnings

Quick Start

Method 1: One-Command Remote Installation (Easiest)

# Install to ALL Chrome profiles with one command
curl -sSL https://raw.githubusercontent.com/hatimmakki/chrome-custom-devices/main/quick-install.sh | bash

Method 2: Python Package (PyPI)

# Install via pip
pip install chrome-custom-devices

# Run installation
chrome-devices --install-all

Method 3: Node.js Package (npm)

# Install globally via npm
npm install -g chrome-custom-devices

# Run installation
chrome-devices

Method 4: Homebrew (macOS)

# Add tap and install
brew tap hatimmakki/tap
brew install chrome-custom-devices

# Run installation
chrome-devices --install-all

Method 5: Local Development

# Clone and install locally
git clone https://github.com/hatimmakki/chrome-custom-devices.git
cd chrome-custom-devices
pip install -e .
chrome-devices --install-all

Method 6: Using Vibranium CLI

# Install Vibranium globally
npm install -g @pittankopta/vibranium

# Generate and install devices
chrome-devices --output vibranium
npx @pittankopta/vibranium add devices.json

Device List

The script includes the following devices:

| Device Name | Width | Height | DPR | Type | |-------------|-------|--------|-----|------| | Apple MacBook 12-inch | 2304 | 1310 | 2 | Desktop | | Apple MacBook Pro 13-inch | 2560 | 1470 | 2 | Desktop | | Apple MacBook Pro 15-inch | 2880 | 1670 | 2 | Desktop | | iMac 24 - 2021 | 2048 | 1152 | 2 | Desktop | | MacBook PRO 16 - 2021 | 1728 | 1117 | 2 | Desktop | | MacBook Air 13 - 2020 | 1280 | 800 | 2 | Desktop | | MacBook Pro 16 - 2019 | 1536 | 960 | 2 | Desktop | | MacBook Pro 13 - 2018 | 1280 | 800 | 2 | Desktop | | MacBook Air 13 - 2018 | 1280 | 800 | 2 | Desktop | | MacBook Pro 15 - 2018 | 1440 | 900 | 2 | Desktop | | MacBook Pro 13 Pro - 2017 | 1440 | 900 | 2 | Desktop | | MacBook Pro 15 Pro - 2017 | 1280 | 800 | 2 | Desktop | | MacBook Pro 13 Pro - 2016 | 1280 | 800 | 2 | Desktop | | MacBook Pro 15 Pro - 2016 | 1440 | 900 | 2 | Desktop | | MacBook Pro 13 Pro - 2015 | 1280 | 800 | 2 | Desktop | | MacBook Pro 15 Pro - 2015 | 1440 | 900 | 2 | Desktop | | MacBook Pro 15 Pro - 2014 | 1440 | 900 | 2 | Desktop | | Notebook with touch | 1280 | 950 | 1 | Desktop | | Notebook with HiDPI screen | 1440 | 900 | 2 | Desktop | | Dell Latitude 3420 14 | 1440 | 809 | 1 | Desktop | | Microsoft Surface Duo | 1114 | 705 | 2.5 | Mobile | | Generic notebook | 1280 | 800 | 1 | Desktop |

Installation

1. Clone this repository:

git clone https://github.com/your-username/chrome-custom-devices.git
cd chrome-custom-devices

2. Install Python dependencies:

pip install -r requirements.txt

3. Run the script:

python chrome_devices_manager.py --help

Usage

One-Command Remote Installation

# The easiest way - installs to ALL Chrome profiles automatically
curl -sSL https://raw.githubusercontent.com/user/repo/main/quick-install.sh | bash

Python Script Commands

# Show help
python chrome_devices_manager.py --help

# Install to ALL Chrome profiles automatically (NEW!)
python chrome_devices_manager.py --install-all

# Install to a single Chrome profile (with selection)
python chrome_devices_manager.py --install

# List all found Chrome profiles
python chrome_devices_manager.py --list-profiles

# Generate Vibranium-compatible JSON
python chrome_devices_manager.py --output vibranium

# Generate manual installation files
python chrome_devices_manager.py --output manual

# Backup current Chrome settings
python chrome_devices_manager.py --backup

# Restore from backup
python chrome_devices_manager.py --restore backup_20231215_143022.json

Advanced Examples

# Install to a specific profile
python chrome_devices_manager.py --install --profile "/path/to/Chrome/Profile/Preferences"

# Backup a specific profile
python chrome_devices_manager.py --backup --profile "/path/to/Chrome/Profile/Preferences"

# Generate devices JSON in different formats
python chrome_devices_manager.py --output preferences  # For direct modification
python chrome_devices_manager.py --output manual       # For manual installation
python chrome_devices_manager.py --output vibranium    # For Vibranium CLI

Safety Features

• Automatic Backup: Creates timestamped backups before any modifications
• Chrome Detection: Warns if Chrome is running during installation
• Profile Detection: Automatically finds Chrome profiles on your system
• Rollback Support: Easy restoration from backups
• Validation: Verifies JSON structure before installation

Supported Platforms

• Windows: Chrome, Chrome Beta, Chrome Dev, Chrome Canary
• macOS: Chrome, Chrome Beta, Chrome Dev, Chrome Canary
• Linux: Chrome, Chromium, Chrome Beta, Chrome Dev

Contributing

1. Fork the repository
2. Create a feature branch
3. Add your devices to the devices.py file
4. Test your changes
5. Submit a pull request

License

MIT License - see LICENSE file for details.

Changelog

v1.1.0 (2025-06-22)

• Added one-command remote installation script (quick-install.sh)
• Added --install-all flag to install to ALL Chrome profiles automatically
• Enhanced cross-platform support for Chrome variants (Beta, Dev, Canary, Arc, Chromium)
• Improved user experience with colored output and progress indicators
• Added comprehensive profile detection and display
• Self-contained bash script with embedded device data

v1.0.0 (2025-06-22)

• Initial release
• Support for 22 custom devices
• Multiple installation methods
• Cross-platform compatibility
• Automatic backup and restore functionality

Troubleshooting

Chrome settings are overridden

• Make sure Chrome is completely closed before running the script
• Check that you're modifying the correct profile

Devices don't appear in DevTools

• Restart Chrome after installation
• Check DevTools > Settings > Devices
• Verify the JSON structure in your Preferences file

Permission errors

• Run with administrator/sudo privileges if needed
• Check file permissions on Chrome profile directory

Credits

• Inspired by mfehrenbach's Chrome device dimensions gist
• Uses Vibranium CLI tool for automated installation
• Based on Chrome DevTools device emulation API