【Web開発/制作】Chrome拡張機能のメモ【随時更新】

Webアプリ開発を学習中のNOAです。

学習や個人開発の中で 「これはWeb開発に役立つな」と感じた Chrome拡張機能 を、 備忘録も兼ねてまとめていきます。

✔ 網羅的なまとめではありません ✔ 実際に触って「良かったもの」だけ ✔ 今後も少しずつ追記予定

同じようにWeb開発を学習中の方の参考になれば嬉しいです。

Webサイトコーディング・デザイン系

#レスポンシブ確認

• モバイル電話シミュレーター - レスポンシブサイトテスト 複数のモデルでスマートフォンやタブレットをブラウザ上でシミュレーションし、モバイルサイトやレスポンシブサイトをテストします。

サイト分析・調査系

#使用技術

• Wappalyzer - Technology profiler 現在表示している Web ページで使われている技術（言語、フレームワーク、プラットフォーム、分析ツール、その他のサービス）を一覧表示してくれる拡張機能。

#メタ情報

• Localhost Open Graph Debugger 開発中のローカル環境（localhost）にあるウェブサイトのOGP（Open Graph Protocol）タグが、SNS（Facebook, X/Twitterなど）でどのように表示されるかを、実際の公開URLなしで確認できるChrome拡張機能 ※詳細な使い方は公式や他記事が分かりやすいので、そちらも参考にしてください。

• TDK Meta Checker - Chrome Web Store メタ情報を一覧で見られる拡張機能（メタ・ファビコン・OGP他）。

#サイト評価

• Lighthouse Google が提供しているオープンソースの評価ツール。特定のWebアプリ・Webページをチェックし、改善すべき項目を自動でレポートしてくれる。

#アクセス数

• Similarweb - Website Traffic & SEO Checker 閲覧中のウェブサイトのアクセス数、訪問者の属性、流入元（どこから来たか）、競合サイトとの比較などの情報を、ブラウザ上で分析・表示してくれるツール。

効率化・その他

• FireShot ウェブページ全体や表示範囲、選択範囲などを手軽にスクリーンショット（画面キャプチャ）して、画像（PNG, JPEG, GIF）やPDFとして保存・編集・共有できるブラウザ拡張機能。

• OneTab タブが多すぎると感じたら、OneTab アイコンをクリックして、すべてのタブをリストに変換する。タブが必要になったときは、個別にも一括でも復元できる。

⚠️ 安全性・使い方は個別に調査してください。 ⚠️ その他ブラウザで使用可能かは確認してください。（気が向いたら記載）

ちょっとずつ便利な手段を増やしていきたいと思います。 また、将来的にはChrome拡張機能の自作にも挑戦してみたいです。