CDP Full-Page Screenshot Chrome Extension

A Google Chrome Extension (Manifest V3) built with Angular that captures full-page screenshots in a single click using the native Chrome DevTools Protocol (CDP) via the chrome.debugger API.

---

🚀 Key Features

• Native Full-Page Capturing: Utilizes the Chrome DevTools Protocol Page.captureScreenshot command with captureBeyondViewport: true to stitch the full scrollable page layout.
• Modern Angular Architecture: Built with Angular, utilizing Angular Signals for clean reactive state management.
• Premium Glassmorphic UI: High-end user interface featuring dark mode aesthetics, loading animations, mock browser window preview, and single-click Copy-to-Clipboard & Download buttons.
• Flexible Access: Runs as both a Popup and a Side Panel inside Google Chrome.

---

🛠️ How It Works

Under the hood, the extension communicates directly with the Chrome browser engine:

1. Attaches Debugger: It queries the active tab and attaches the chrome.debugger API to it.
2. Sends CDP Command: It dispatches the Page.captureScreenshot command to the DevTools backend.
3. Bypasses Viewport Constraints: By specifying captureBeyondViewport: true, it instructs Chrome to render and capture sections of the page that are hidden outside the current view port, without manually scrolling.
4. Detaches Debugger: Immediately detaches the debugger connection to restore normal tab state.
5. Processes Results: Receives base64-encoded PNG image data, renders a glassmorphic preview, and lets you download the file or copy it straight to your clipboard.

---

📦 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm (v9 or higher)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd angularchromeextension

2. Install dependencies:

   npm install

3. Configure the custom extension icon (move from local brain folder if applicable):

   cp /home/jayksi157/.gemini/antigravity/brain/f20fe35a-6cd9-4fcd-92ab-32f945eb0c7f/icon_1783688978985.png ./public/icon.png

4. Compile the extension:

   npm run build

---

🔧 Loading the Extension in Google Chrome

1. Open Chrome and navigate to chrome://extensions/.
2. Toggle Developer mode on in the top-right corner.
3. Click the Load unpacked button in the top-left corner.
4. Select the output directory: angularchromeextension/dist/angularchromeextension/browser
5. Pin the extension, open any website (e.g. google.com), and click "Capture Full Page".

---

📂 Project Structure

├── manifest.json         # Extension Manifest V3 configuration
├── angular.json          # Angular CLI workspace build config
├── tsconfig.json         # TypeScript configuration
├── public/               # Asset folder (copied directly to dist)
│   └── icon.png          # Chrome extension toolbar & action icon
└── src/                  
    ├── index.html        # Extension Popup & Side panel main wrapper
    ├── styles.css        # Base resets, global typography & scrollbars
    ├── main.ts           # Bootstraps the Angular Application
    └── app/              
        ├── app.config.ts # Core Angular configurations and providers
        ├── app.ts        # Component logic managing states (Signals)
        ├── app.html      # UI structure with a premium glassmorphic theme
        ├── app.css       # Animations, gradients, & custom component styling
        └── services/     
            └── screenshot.service.ts  # Executes the chrome.debugger and CDP capture logic

---

📄 License

Distributed under the MIT License. See LICENSE for details.

Copyright (c) 2026 Open Source Contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.