SanpClip.

SnapClipは、スクリーンショットを簡単に取得し、編集するためのChrome拡張機能です。

このツールを使えば、画面全体や選択した部分をキャプチャして、素早く編集することができます。

DEMO

Usage

1. インストール: Chrome拡張機能としてSnapClipをインストールします。 インストールはこちら

2. キャプチャ:

• 全画面キャプチャ: 「Full ScreenShot」ボタンをクリックして、表示されている画面全体をキャプチャします。
• 選択してキャプチャ: ドラッグ&ドロップで範囲を選択し、部分的にキャプチャします。

3. 編集: キャプチャしたスクリーンショットを編集し、必要に応じて保存します。

使用技術

Vite Plugin

• vite-plugin-react-swc: Reactのコンパイラ。Babel の約20倍速い SWC を使用している
• vite-tsconfig-paths: TypeScriptのtsconfig.jsonファイルに設定されたパスエイリアスをViteのビルドプロセスでもサポートするためのツール。TypeScriptとViteのパスエイリアスが一致するようになる
• @crxjs/vite-plugin: Chrome拡張機能開発用プラグイン

Libraly

• React: ユーザーインターフェースを構築するためのライブラリ

編集画面では以下を使用しています。

• Fabric.js: キャプチャしたスクリーンショットの編集に使用
• Material UI (MUI): ユーザーインターフェースコンポーネントを提供するライブラリ。@mui/materialと@mui/icons-materialを利用しています。
• React Color: カラーピッカーのライブラリ。
• Tailwind CSS: CSSライブラリ
• DaisyUI: Tailwind CSSのコンポーネントライブラリ。