はじめに
この記事はNuco Advent Calendar 2023の7日目の記事です。
本記事では、おすすめのChromeの拡張機能を8つのカテゴリ別に40個紹介しようと思います。
利用ユーザー数と評価は、2023年11月時点のものです。
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。
目次
Google Chromeの拡張機能とは?
1. 開発全般に使える拡張機能 (4選)
2. テストデータ作成に使える拡張機能 (2選)
3. サーバーサイド開発時に使える拡張機能 (3選)
4. フロントエンド開発時に使える拡張機能 (14選)
5. クラウドサービス利用時に使える拡張機能 (3選)
6. ドキュメント作成時に使える拡張機能 (3選)
7. 調査に使える拡張機能(7選)
8. 情報整理に使える拡張機能(4選)
注意事項
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にしたり、削除することが大切です。
セキュリティ・リスク
信頼できる拡張機能のみを利用するようにしましょう。
悪意のあるパブリッシャーが作成した拡張機能を使ってしまうことがないよう、利用ユーザー数やレビューをちゃんと見るのが大事です。
定期的に更新する
アップデートをする目的は、機能改善、不具合改修だけではなく、新たなセキュリティリスクへの対策にもなります。
最後に
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。