🎨 QuickPaint Installation Guide

Manual Installation for Chrome & Edge Browsers

📦 What You'll Need

This guide will walk you through installing the QuickPaint extension manually, without using the Chrome Web Store. This is useful for testing, development, or when you want to install a custom version of the extension.

1Download the Extension Files

First, you need to obtain the QuickPaint extension files. You should have a folder containing these files:

  • manifest.json - Extension configuration
  • content.js - Main drawing functionality
  • background.js - Background service worker
  • content.css - Styles for toolbar
  • popup.html, popup.js - Popup interface
  • icons/ - Folder with extension icons
⚠️ Important: Make sure you extract the entire folder to a permanent location on your computer. Don't use your Downloads folder or Temp folder, as Chrome needs continuous access to these files.

2Open Chrome Extensions Page

There are several ways to access the Chrome extensions management page:

  • Method 1: Type chrome://extensions in the address bar and press Enter
  • Method 2: Click the three-dot menu (⋮) → More Tools → Extensions
  • Method 3: Right-click the extensions icon (puzzle piece) → Manage Extensions
Screenshot: Chrome extensions page (chrome://extensions)

3Enable Developer Mode

In the top-right corner of the Extensions page, you'll see a toggle switch labeled "Developer mode".

  • Click the toggle to turn on Developer mode
  • The switch should turn blue and new buttons will appear
Screenshot: Developer mode toggle in the ON position

💡 What is Developer Mode?

Developer mode allows you to load unpacked extensions, inspect extension code, and see more detailed error messages. It's safe to enable and only affects how Chrome handles extensions.

4Load the Extension

After enabling Developer mode, you'll see three new buttons. Click on "Load unpacked".

  • A file browser window will open
  • Navigate to the folder containing the QuickPaint extension files
  • Select the main folder (the one containing manifest.json)
  • Click "Select Folder" or "Open"
Screenshot: "Load unpacked" button and file selection dialog

5Verify Installation

If everything went correctly, QuickPaint should now appear in your extensions list!

✅ Success! You should see the QuickPaint extension card with its icon, name, and version number. The extension should be enabled by default (toggle switch is blue).

You can now:

  • Click the extension icon in your toolbar to activate drawing mode
  • Use the keyboard shortcut Alt+Shift+D to toggle drawing
  • Right-click on any webpage for QuickPaint options

6Pin to Toolbar (Optional)

For easy access, you can pin QuickPaint to your Chrome toolbar:

  • Click the extensions icon (puzzle piece) in the Chrome toolbar
  • Find QuickPaint in the list
  • Click the pin icon (📌) next to it
  • The QuickPaint icon will now appear directly in your toolbar

1Download the Extension Files

First, you need to obtain the QuickPaint extension files. You should have a folder containing these files:

  • manifest.json - Extension configuration
  • content.js - Main drawing functionality
  • background.js - Background service worker
  • content.css - Styles for toolbar
  • popup.html, popup.js - Popup interface
  • icons/ - Folder with extension icons
⚠️ Important: Make sure you extract the entire folder to a permanent location on your computer. Don't use your Downloads folder or Temp folder, as Edge needs continuous access to these files.

2Open Edge Extensions Page

There are several ways to access the Edge extensions management page:

  • Method 1: Type edge://extensions in the address bar and press Enter
  • Method 2: Click the three-dot menu (⋯) → Extensions
  • Method 3: Click the extensions icon (puzzle piece) → Manage Extensions
Screenshot: Edge extensions page (edge://extensions)

3Enable Developer Mode

In the left sidebar or bottom-left corner of the Extensions page, you'll see a toggle switch labeled "Developer mode".

  • Click the toggle to turn on Developer mode
  • The switch should turn blue and new buttons will appear
Screenshot: Developer mode toggle in Edge

💡 Edge & Chrome Compatibility

Microsoft Edge is built on Chromium (the same foundation as Chrome), so it can run Chrome extensions perfectly! QuickPaint works great on both browsers.

4Load the Extension

After enabling Developer mode, you'll see several new buttons. Click on "Load unpacked".

  • A file browser window will open
  • Navigate to the folder containing the QuickPaint extension files
  • Select the main folder (the one containing manifest.json)
  • Click "Select Folder" or "Open"
Screenshot: "Load unpacked" button in Edge

5Verify Installation

If everything went correctly, QuickPaint should now appear in your extensions list!

✅ Success! You should see the QuickPaint extension card with its icon, name, and version number. The extension should be enabled by default (toggle switch is blue).

You can now:

  • Click the extension icon in your toolbar to activate drawing mode
  • Use the keyboard shortcut Alt+Shift+D to toggle drawing
  • Right-click on any webpage for QuickPaint options

🎯 Edge Advantage for PDFs

QuickPaint works especially well with PDF files in Microsoft Edge! If you're planning to annotate PDFs, Edge is the recommended browser.

6Pin to Toolbar (Optional)

For easy access, you can pin QuickPaint to your Edge toolbar:

  • Click the extensions icon (puzzle piece) in the Edge toolbar
  • Find QuickPaint in the list
  • Click the eye icon (👁️) next to it to toggle visibility
  • The QuickPaint icon will now appear directly in your toolbar

🎯 Testing Your Installation

Let's make sure everything is working correctly:

  1. Open any webpage (try google.com for a simple test)
  2. Click the QuickPaint icon in your toolbar (or press Alt+Shift+D)
  3. You should see:
    • A floating toolbar appear on the page
    • Drawing tools (pen, eraser, cloud box, pointer)
    • Color picker and thickness slider
  4. Try drawing: Select the pen tool and draw on the page
  5. Test scrolling: Scroll the page - your drawing should stay in place
🎉 Congratulations! If you can draw on the page, QuickPaint is installed and working correctly!

🔧 Troubleshooting Common Issues

❌ Extension won't load?
  • Make sure the folder contains manifest.json at the root level
  • Check that all required files are present (content.js, background.js, etc.)
  • Look for error messages on the extensions page - they'll tell you what's wrong
  • Try clicking the "Refresh" icon on the extension card
❌ Extension icon not showing?
  • Check that the icons/ folder exists and contains icon files
  • The extension may still work - just look for "QuickPaint" text in the extensions menu
❌ Extension works but drawings don't appear?
  • Try refreshing the webpage after enabling the extension
  • Check that the toolbar appears when you click the extension icon
  • Open the browser console (F12) and look for error messages

🔄 Updating the Extension

If you receive a new version of QuickPaint:

  1. Replace the old extension files with the new files
  2. Go to the extensions page (chrome://extensions or edge://extensions)
  3. Click the refresh/reload icon (🔄) on the QuickPaint extension card
  4. Refresh any open webpages to load the new version

💾 Your drawings are safe!

All your saved drawings are stored in the browser's local storage, not in the extension files. Updating the extension won't delete your drawings.

📚 Quick Start Guide

Now that QuickPaint is installed, here's how to use it:

Keyboard Shortcuts: • Alt+Shift+D - Toggle drawing mode on/off • Alt+Shift+C - Capture full screenshot with drawings • Alt+Shift+R - Capture selected region • Alt+Shift+X - Clear all drawings • Ctrl+Z - Undo last action • Ctrl+Y - Redo last action Tools Available: • Pointer - Normal mode (no drawing, interact with page) • Pen - Draw freehand • Eraser - Remove parts of your drawing • Cloud Box - Draw CAD-style revision clouds Features: • Drawings persist across page refreshes • Drawings stay in place when scrolling • Screenshots copy directly to clipboard • All data stored locally (privacy-first)

QuickPaint - Draw on Any Webpage

Need help? Check the extension's README file or open the browser console (F12) for error messages.

This extension respects your privacy - no data is collected or transmitted.