画面定規 - Pixel Ruler with History

Webページ上でドラッグしてピクセル距離・サイズを計測し、履歴を保存・再現できる画面定規（ピクセルルーラー）拡張機能

画面定規 - Pixel Ruler with History は、Webページ上でドラッグするだけでピクセル単位の距離やサイズを計測できるChrome拡張機能です。 ■ 主な機能 【2つの計測モード】 ・直線モード：2点間の距離を「自由」「水平のみ」「垂直のみ」の3パターンで計測。自由モードではドラッグ中にShiftキーを押すと、その時点までの移動量が大きい方向（水平/垂直）に一時的にロックできます。 ・矩形モード：ドラッグした範囲の幅と高さを同時に計測し、四辺それぞれに数値を表示します。 【表示単位（px / px + vw）】 ・計測結果をpxに加えて、ビューポート幅に対する割合（vw）で併記できます（例: 120px (30.8vw)）。 ・vwはスクロールバーを含むビューポート幅を基準に計算されます。レスポンシブデザインの比率を確認したいときに便利です。 【計測履歴】 ・計測結果は自動的に履歴リストに追加されます。 ・履歴をクリックすると、同じ位置に計測線を再現できます。マウスを重ねる（ホバーする）だけでも、クリックする前にその場でプレビュー表示できます。 ・Ctrlキー（Macでは⌘キー）を押しながらクリックすると、複数の履歴を同時に表示して見比べられます。もう一度Ctrl+クリックすれば解除、まとめて解除するボタンも用意しています。 ・「保存」ボタンを押すとブラウザを閉じても履歴が消えないようになります（押すまでは一時的な履歴として扱われます）。 ・不要な履歴は個別に削除、またはまとめて削除できます。 【表示カラー】 ・計測線の色を自由に選択できます。 ・よく使う色はプリセットとして保存できます。 【要素への自動吸着（β機能）】 ・ONにすると、ページ上の要素の辺（上下左右）にカーソルを近づけた際、自動的にその辺へスナップします。 ・デフォルトはOFFです。ページによっては動作が不安定になる場合があるため、ベータ機能として提供しています。 【狭い画面でも使いやすいパネル】 ・パネルの「最小化」ボタンで、計測モードを続けたままパネルだけを一時的に隠せます。画面端のタブからいつでも呼び戻せます。 ・画面幅が狭いとき（開発者ツールのモバイル表示など）は、パネルが自動的に画面下部の横長バー形式に切り替わり、「設定」「履歴」のタブで切り替えて操作できます。計測エリアを広く確保できます。 【Googleアカウント間での履歴共有（オプション）】 ・同じGoogleアカウントでログインしているChrome間で、計測履歴を同期できます。 ・デフォルトはOFFで、ONにした場合のみ chrome.storage.sync を通じて同期されます。 【日本語・英語に対応】 ・Chromeの表示言語設定に応じて、日本語または英語で表示されます。 ■ こんな方におすすめ ・Webデザイナー、フロントエンドエンジニアの方 ・デザインカンプと実装のズレを確認したい方 ・要素間の余白やサイズをすばやく確認したい方 ■ 使い方 1. ツールバーのアイコンをクリックしてパネルを開く 2. 「直線」または「矩形」を選択 3. ページ上でドラッグして計測 4. 履歴から過去の計測を再確認・再現。Ctrl+クリックで複数を見比べることも可能 ■ プライバシーについて 本拡張機能は個人を特定する情報を収集しません。計測履歴はお使いのブラウザのローカルストレージ、または任意でONにした場合のみGoogleアカウントの同期ストレージに保存されます。外部サーバーへのデータ送信は一切行いません。 本拡張機能は、ユーザーがツールバーのアイコンをクリックした瞬間にのみ、そのタブに計測用のスクリプトとスタイルシートを注入するために scripting 権限を使用します。 具体的には、chrome.scripting.executeScript() と chrome.scripting.insertCSS() を使い、ユーザーが明示的にアイコンをクリックしたタブ（activeTab権限で一時的にアクセスが許可された対象）に限定して、計測パネルとオーバーレイのUIを構築します。 マニフェストの content_scripts によるすべてのページへの自動注入は行っていません。そのため、ユーザーが一度もこの拡張機能を使用していないページには、拡張機能のコードやDOM要素は一切存在しません。これはユーザーのプライバシーを尊重し、拡張機能の影響範囲を実際に使用した時・使用したタブだけに限定するための設計です。