Crop - Webページ要素を正確に選択してキャプチャするChrome拡張

こんにちは。Webページ上で必要な部分を正確にキャプチャするためのChrome拡張機能、Cropを紹介します。

Cropは、現在表示しているページ上にオーバーレイを表示し、DOM要素をマウスでポイントして選択したり、直接範囲をドラッグしてPNGとしてコピー・保存できるようにするツールです。

Firefoxのスクリーンショット機能で要素を正確に選択する操作感が便利だと感じ、Chromeでも同じような形で使いたくて作り始めました。

主な機能

• マウスホバーでDOM要素をハイライト
• クリックで要素を選択
• ドラッグでカスタム範囲を選択
• 選択範囲の移動とサイズ調整
• 現在のviewportをキャプチャ
• ページ全体をキャプチャ
• viewport外まで続く選択範囲のスクロールキャプチャ
• PNGをクリップボードにコピー、またはファイルとして保存

権限とプライバシー

ブラウザ拡張機能なので権限が気になる方もいると思い、この部分はできるだけ少なくするようにしました。

現在使用している権限は以下の程度です。

• activeTab: ユーザーが拡張を実行した現在のタブにのみ一時的にアクセス
• scripting: 現在のタブにオーバーレイスクリプトを注入
• clipboardWrite: 生成したPNGをクリップボードにコピー
• downloads: 生成したPNGを保存

debugger、<all_urls> のような広い権限は要求しません。

スクリーンショットはブラウザ内でローカルに処理されます。サーバーへスクリーンショットやページデータをアップロードせず、テレメトリーも入れていません。画像はユーザーがCopyまたはSaveを押したときだけ、クリップボードまたはダウンロードファイルとして出力されます。

現在の制限

Chrome拡張機能の制約により、以下のケースには制限があります。

• chrome:// ページやChrome Web Storeのような制限されたページでは実行できません。
• cross-origin iframe内部はcontent scriptから調べられないため、要素選択に制限があります。
• closed shadow DOM内部にもアクセスできません。
• ページ全体のキャプチャは現在 top-level document 基準で動作します。
• 非常に大きなページでは、ブラウザのcanvas制限によりPNGがdownscaleされる場合があります。
• lazy loading、animation、sticky header/footer が多いページでは、フルページのstitch結果が完全ではない場合があります。

実装について

Chrome Manifest V3ベースで作成しました。

ページ上にcontent scriptを注入し、Shadow DOMベースのオーバーレイで選択・リサイズ・キャプチャの流れを処理します。ページ全体やviewport外の範囲は chrome.tabs.captureVisibleTab() とスクロールstitchingを組み合わせてキャプチャします。

Firefox Screenshots側を参考にして適用した一部コードについてはMPL-2.0の表示を維持し、新たに作成したプロジェクトコードはMITライセンスで配布できるよう整理してあります。Mozilla/Firefoxと公式に提携、または保証を受けたプロジェクトではありません。

リンク

Chrome Web Store:
https://chromewebstore.google.com/detail/crop/…

GitHub:
https://github.com/postmelee/crop

ドキュメント作成、バグレポート、UIレビューのようにWebページのキャプチャを頻繁に行う方に使っていただき、不便な点や改善アイデアを残してもらえるとうれしいです。