Installation & Setup Guide
Step-by-step instructions for installing ClickSnap via Chrome Web Store or loading unpacked in developer mode.
Method 1: Chrome Web Store (Recommended)
The easiest and fastest way to install ClickSnap with automatic background updates is through the official Chrome Web Store.
Installation Steps
Follow these three simple steps:
Visit Web Store
Navigate to the ClickSnap listing on Google Chrome Web Store.
Click Add to Chrome
Click the blue "Add to Chrome" button and confirm permissions in the native prompt.
Instant Activation
The ClickSnap camera icon will appear in your Chrome extension puzzle bar immediately.
Method 2: Unpacked Developer Mode
If you are contributing to ClickSnap or running in enterprise offline air-gapped environments, load the compiled dist/ directory directly.
Compiling from Source
Clone the repository and build production artifacts using Vite & TypeScript:
git clone https://github.com/RavirajSarangan/ClickSnap.git
cd ClickSnap
npm install
npm run buildLoading in Chrome
1. Open Chrome and navigate to chrome://extensions 2. Toggle on "Developer mode" in the top-right corner 3. Click "Load unpacked" in the top-left corner 4. Select the dist/ directory from your cloned repository.
Pinning Extension to Toolbar
For instant 1-click access during daily browsing, pin ClickSnap to your active toolbar.
How to Pin
Click the puzzle piece icon in Chrome top right corner, find ClickSnap, and click the Pin icon. The camera icon will now remain visible permanently.
Taking Your First Capture
You are now ready to capture pages:
Quick Test
1. Navigate to any website (e.g. github.com or news.ycombinator.com) 2. Press Alt+Shift+F on your keyboard 3. Watch ClickSnap automatically scroll down the page and open the full visual in the Studio Editor instantly!
Was this documentation helpful?
Your feedback helps us continuously improve technical guides.