はじめに

この記事はNuco Advent Calendar 2023の7日目の記事です。

本記事では、おすすめのChromeの拡張機能を8つのカテゴリ別に40個紹介しようと思います。
利用ユーザー数と評価は、2023年11月時点のものです。

弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。

Google Chromeの拡張機能とは?

概要

Chromeの拡張機能とは、Chromeブラウザに機能を追加することができるアドオンツールです。
Chrome ウェブストア上に様々な拡張機能が公開されているので、好きなツールを検索してインストールすることができます。

インストール方法

気になる拡張機能を「Chrome に追加」するだけです。

1. 開発全般に使える拡張機能　(4選)

1-1. JSON Formatter

【JSON整形ツール】
===　利用ユーザー数：約2,000,000　評価： ★4.6　===
JSONを読みやすい形式で整形してくれます。

1-2. JSON Viewer

【JSON整形ツール】
===　利用ユーザー数：約1,000,000　評価： ★4.5　===
こちらもJSONを読みやすい形式で整形してくれます。
JSONだけでなく、JSONPにも対応しているのが特徴です。

1-3 JSONVue

【JSON整形&フォーマットチェックツール】
===　利用ユーザー数：約1,000,000　評価： ★4.5　===
こちらもJSONを読みやすい形式で整形してくれます。
バリデーション機能も欲しい方はこちらをどうぞ。

1-4. マリナラ：pomodoro®-アシスタント

【時間管理ツール】
===　利用ユーザー数：約300,000　評価： ★4.8　===
タイマーや通知機能のある時間管理ツールになります。
時間を決めて集中したい時に使えます。

2. テストデータ作成に使える拡張機能 (2選)

2-1. Lipsum Generator

【テキストデータ作成ツール】
===　利用ユーザー数：約 800,000　評価： ★3.9　===
任意の長さのテキストやHTMLを生成できます。
テストデータ作成のためにスクリプトを作ったり、何度もコピペをする作業から解放されます。

2-2. Autofill

【自動フォーム入力ツール】
===　利用ユーザー数：約 5,000　評価： ★4.9　===
フォームへの入力を自動化することができます。

3. サーバーサイド開発時に使える拡張機能 (3選)

3-1. Talend API Tester

【APIクライアントツール】
===　利用ユーザー数: 約600,000　評価: ★4.8　===
WebAPIのテストクライアントです。
以下のように使い分けることもできます。

ブラウザ → Talend API Test
アプリ → Postman
VS Code → REST Client

3-2. Save Code

【ソースコード共有ツール】
===　利用ユーザー数: 約5,000 　評価: ★5.0　===
コードスニペットの整理、保存、共有を簡単に実施することができるようになります。
GitHubで管理するほどでもないけど、Slackだと流れてしまい見にくい。
そんな時に役立つツールです。

3-3. Python Shell

【Python実行ツール】
===　利用ユーザー数: 約100,000 　評価: ★4.2　===
ブラウザ上で動くPython shellになります。
本記事の執筆時点では、Pythonのバージョンは、3.7.4です。
バージョンアップに期待。

4. フロントエンド開発時に使える拡張機能 (14選)

4-1. ColorZilla

【カラー関連のツールスイート】
===　利用ユーザー数: 約3,000,000 　評価: ★4.5　===
ページ内で指定した箇所のカラーコードを表示したり、グラデーションを生成したりすることができます。

4-2. CSSViewer

【CSSプロパティ確認ツール】
===　利用ユーザー数: 約200,000 　評価: ★4.4　===
対象オブジェクトにホバーさせると、CSSのプロパティが見れます。

4-3. Dimensions

【計測ツール】
===　利用ユーザー数: 約200,000 　評価: ★4.2　===
画面上の要素間の幅を自動計算できるので、感覚頼りの作業を減らせます。

4-4. Responsive Viewer

【レスポンシブサイトの検証ツール】
===　利用ユーザー数: 約200,000 　評価: ★4.7　===
複数の画面サイズを1画面に表示することができるので、目視チェックを効率良く進められます。

4-5. VisBug

【デザイン作成ツール】
===　利用ユーザー数: 約100,000 　評価: ★4.8　===
webサイトのコンテンツ（画像、テキスト）の変更やエレメントの移動を簡単にできます。
Figmaのようにデザイン作成ができます。

4-6. Web Maker

【HTML, CSS, JavaScriptのplaygroundツール】
===　利用ユーザー数: 約60,000 　評価: ★4.8　===
HTMLやCSS,JavaScriptの実験や練習をすることができます。
SCSSやTypeScriptにも対応してる他、オフラインでの使用も可能です。

4-7. HTMLエラーチェッカー

【HTMLの静的解析ツール】
===　利用ユーザー数: 約80,000 　評価: ★4.4　===
HTMLの構文チェックをしてくれます。
タグの閉じ忘れなどの記述ミスを表示してくれるので、効率良くチェック作業を進められます。

4-8. Lighthouse

【パフォーマンス測定ツール】
===　利用ユーザー数: 約1,000,000 　評価: ★4.4　===
Webサイトのパフォーマンス測定やSEOに関するテストを実施できます。
対策に必要な改善案の提案をしてくれるので、心強いです。

4-9. Redux DevTools

【状態変更デバッグツール】
===　利用ユーザー数: 約1,000,000 　評価: ★4.7　===
Reduxの状態変更をデバッグできる。
ReactやAngularのstateを対象にすることもできるので用途が広く、使い勝手が◎

4-10. React Developer Tools

【React用デバッグツール】
===　利用ユーザー数: 約4,000,000 　評価: ★4.0　===
Chrome DevTools に「コンポーネント」と「プロファイラー」が追加され、各コンポーネントの情報を見たり、パフォーマンスに関する情報を確認できます。便利。

4-11 Vue.js devtools

【Vue.js用デバッグツール】
===　利用ユーザー数: 約2,000,000 　評価: ★4.4　===
Chrome DevTools に「Vue」が追加され、各コンポーネントの情報を見られるようになります。

4-12. GTM Sonar

【Googleタグマネージャーのイベントテストツール】
===　利用ユーザー数: 約10,000 　評価: ★5.0　===
タグマネージャーのイベントがリスナーで動作するかを確認することができます。

4-13. SEO Pro Extension

【SEOツール】
===　利用ユーザー数: 約70,000 　評価: ★4.8　===
サイトのSEO関連のデータをわかりやすいUI上で確認できるようになります。

4-14. EditThisCookie

【Cookie管理ツール】
===　利用ユーザー数: 約2,000,000 　評価: ★4.4　===
Cookieを追加、削除、編集、検索、保護、ブロックすることができます。
また、JSON形式でインポートやエクスポートできるので、簡単に共有することができます。

5. クラウドサービス利用時に使える拡張機能 (3選)

5-1. GCP console colorize

【GCPのユーザービリティ向上ツール】
===　利用ユーザー数: 約3,000 　評価: ★4.9　===
プロジェクト単位でコンソール上のヘッダー色を設定することができます。
操作ミスによる悲劇を防ぐのに役立ちます。

5-2. AWS console regions color

【AWSのユーザービリティ向上ツール】
===　利用ユーザー数: 約623 　評価: ★4.7　===
選択したリージョンに応じて、コンソール画面のヘッダー色を設定することができます。
たまに別リージョンに切り替わっていることがあったりするので、メインで利用するリージョンの設定をしておくとすぐに気付けます。

5-3. Colorlize AWS Cloudwatch Logs

【AWS CloudWatch Logsの可視化ツール】
===　利用ユーザー数: 約1,000 　評価: ★4.1　===
CloudWatch Logsをリクエスト単位で色付けできるので、特定時間帯の調査時に役立ちます。

6. ドキュメント作成時に使える拡張機能 (3選)

6-1. GoFullPage

【スクリーンショットツール】
===　利用ユーザー数: 約7,000,000 　評価: ★4.9　===
スクロールが必要な縦幅のある面幅のスクショを1画像に収めることができます。

6-2. QRコード作成器 (Quick QR)

【QRコード生成ツール】
===　利用ユーザー数: 約500,000 　評価:4.9 ★　===
ページをそのままQRコードにしたり、文章やURLをQRコードにすることが可能です。

6-3. 素晴らしい画面の並べ替えとスクリーンショット

【レコーダー&キャプチャツール】
===　利用ユーザー数: 約3,000,000 　評価: ★4.7　===
スクリーンレコーダー、スクリーンキャプチャおよび注釈ツール。

7. 調査に使える拡張機能(7選)

7-1. Wappalyzer - Technology profiler

【利用技術の特定ツール】
===　利用ユーザー数: 約2,000,000 　評価: ★4.6　===
サイトで利用されている技術を特定することができます。
以下のような情報を取得できます。

コンテンツ管理システム
eコマースプラットフォーム
Webフレームワーク
サーバーソフトウェア
分析ツール

7-2. daily.dev

【開発者向け情報収集ツール】
===　利用ユーザー数: 約200,000 　評価: ★4.9　===
開発者とし興味のある分野を1つのフィードで確認できます。
パーソナライズされるので、利用するほど関心の強い情報を収集できます。

7-3. OctoLinker

【GitHub用のコードリーディングツール】
===　利用ユーザー数: 約20,000 　評価:4.9 ★　===
GitHub上で使えるツール。
プログラム上のinclude, require, importなどををリンクに変換し、辿れるようにしてくれます。
不慣れな言語のコードを読む時に使えます。

7-4. Search Result Previews

【検索結果プレビューツール】
===　利用ユーザー数: 約30,000 　評価: ★4.2　===
各検索結果の横にページのサムネイルとファビコンが表示されます。
サイトの雰囲気を画像で見れるので、デザインの参考サイトを探すときなど、効率良く作業できます。

7-5. AutoPagerize

【ページネーションツール】
===　利用ユーザー数: 約300,000 　評価: ★4.0　===
分割されたGoogle検索結果を、スクロールするだけで1つのページ内に全て表示することができます。

7-6. DeepL翻訳

【翻訳ツール】
===　利用ユーザー数: 約3,000,000 　評価: ★4.8　===
ブラウザ上で、DeepL翻訳にアクセスできるようになります。

7-7. ato-ichinen

【検索結果制御ツール】
===　利用ユーザー数: 約50,000 　評価: ★4.3　===
この拡張機能を有効にしている間、Google検索結果には1年以内のものが表示されます。
比較的最近の情報のみを探したいときに有効です。

8. 情報整理に使える拡張機能(4選)

8-1. ChatGPT to Notion

【ChatGPTとNotionの連携ツール】
===　利用ユーザー数: 約70,000 　評価: ★4.4　===
ChatGPTとの会話を直接Notionに保存することができるようになります。

8-2. ChatHub

【マルチチャットツール】
===　利用ユーザー数: 約100,000 　評価: ★4.7　===
ChatGPT、Bing、Bardなど、10以上のチャットボットを１画面で活用できます。
複数のチャットボットと同時にチャットできるので、回答結果の比較がしやすくなります。

8-3. Power Tools for Chat GPT

【ChatGPTと検索エンジンの連携ツール】
===　利用ユーザー数: 約3,000,000 　評価: ★4:8　===
ChatGPTと検索エンジンを統合することができるツールです。

8-4. Keepa

【Amazonの価格推移確認ツール】
===　利用ユーザー数: 約3,000,000 　評価: ★4.8　===
Amazonの価格推移を見ることができます。
技術書やハードウェアのお買い得タイミングがわかります。

注意事項

拡張機能をインストールし過ぎるとChromeが重くなる

拡張機能のインストールのし過ぎは、メモリ不足になるため、Chrome本来の操作感に影響が出る可能性があります。
利用しない拡張機能は、offにしたり、削除することが大切です。

セキュリティ・リスク

信頼できる拡張機能のみを利用するようにしましょう。
悪意のあるパブリッシャーが作成した拡張機能を使ってしまうことがないよう、利用ユーザー数やレビューをちゃんと見るのが大事です。

定期的に更新する

アップデートをする目的は、機能改善、不具合改修だけではなく、新たなセキュリティリスクへの対策にもなります。

開発者必見！Chromeの拡張機能おすすめ40選【2023年版】