Work/FULL PAGE CAPTURE
Chrome Extension

FULL PAGE CAPTURE

Whole Web Pages as One PNG or PDF

ページ全体を1枚のPNGまたはPDFに

FULL PAGE CAPTURE icon
01

Overview

概要

A Chrome extension that captures an entire web page, top to bottom, as a single PNG or PDF, including pages inside iframes that normal screenshots can't scroll.

ウェブページ全体を上から下まで1枚のPNGまたはPDFとして保存するChrome拡張機能。通常のスクリーンショットではスクロールできないiframe内のページにも対応します。

Built for capturing long dashboards and reports that live inside embedded frames.

埋め込みフレームの中にある、縦に長いダッシュボードやレポートを保存するために作りました。

02

How it was built

開発

It attaches to the tab through the Chrome DevTools Protocol, resizes the virtual viewport to the page's full height, and captures it in 4,000-pixel slices that are stitched together on an OffscreenCanvas. PDFs go through Page.printToPDF. An optional scroll pass wakes lazy-loaded images first.

Chrome DevTools Protocolでタブに接続し、仮想ビューポートをページ全体の高さに広げて4,000ピクセルずつ撮影し、OffscreenCanvas上で1枚につなぎ合わせます。PDFはPage.printToPDFで生成。遅延読み込みの画像は、事前にスクロールして読み込ませることもできます。

03

What it does

機能
01
PNG or PDF
PNGまたはPDF

One continuous image, or a PDF of the whole page.

1枚の連続した画像、またはページ全体のPDF。

02
No height limit
高さの制限なし

Slicing gets past Chromium's maximum texture height.

分割撮影でChromiumの最大高さを超えて保存。

03
One shortcut
ショートカット一つ

Alt+Shift+S captures the current tab.

Alt+Shift+Sで現在のタブを撮影。

04
Lazy content
遅延読み込み対応

A pre-scroll wakes images that load as you scroll.

事前スクロールで遅延読み込みの画像も撮影。

04

Stack

技術構成

Manifest V3 with chrome.debugger and the DevTools Protocol.

Manifest V3、chrome.debuggerとDevTools Protocolを使用。

Next case study 次の実績
REDNEEDLE
A macOS System Monitor That Remembers What Happened
→