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

# はじめに
この記事は[Nuco Advent Calendar 2023](https://qiita.com/advent-calendar/2023/nuco)の7日目の記事です。

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

::: note
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、[こちら](https://www.recruit.nuco.co.jp/?qiita_item_id=1887820e3e8b98591a6d)まで。
:::
https://www.recruit.nuco.co.jp/?qiita_item_id=1887820e3e8b98591a6d


# 目次
[Google Chromeの拡張機能とは?](#google-chromeの拡張機能とは)
[1. 開発全般に使える拡張機能　(4選)](#1-開発全般に使える拡張機能4選)
[2. テストデータ作成に使える拡張機能 (2選)](#2-テストデータ作成に使える拡張機能-2選)
[3. サーバーサイド開発時に使える拡張機能 (3選)](#3-サーバーサイド開発時に使える拡張機能-3選)
[4. フロントエンド開発時に使える拡張機能 (14選)](#4-フロントエンド開発時に使える拡張機能-14選)
[5. クラウドサービス利用時に使える拡張機能 (3選)](#5-クラウドサービス利用時に使える拡張機能-3選)
[6. ドキュメント作成時に使える拡張機能 (3選)](#6-ドキュメント作成時に使える拡張機能-3選)
[7. 調査に使える拡張機能(7選)](#7-調査に使える拡張機能7選)
[8. 情報整理に使える拡張機能(4選)](#8-情報整理に使える拡張機能4選)
[注意事項](#注意事項)


# Google Chromeの拡張機能とは?
### 概要
Chromeの拡張機能とは、Chromeブラウザに機能を追加することができるアドオンツールです。
[Chrome ウェブストア](https://chromewebstore.google.com/category/extensions)上に様々な拡張機能が公開されているので、好きなツールを検索してインストールすることができます。


### インストール方法
気になる拡張機能を「Chrome に追加」するだけです。

https://support.google.com/chrome_webstore/answer/2664769?hl=ja&ref_topic=6238977&sjid=15540550997473886519-AP

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

https://chromewebstore.google.com/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa

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

### 1-2. JSON Viewer

https://chromewebstore.google.com/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ja

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

### 1-3 JSONVue

https://chromewebstore.google.com/detail/jsonvue/chklaanhfefbnpoihckbnefhakgolnmc

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

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

https://chromewebstore.google.com/detail/%E3%83%9E%E3%83%AA%E3%83%8A%E3%83%A9%EF%BC%9Apomodoro%C2%AE-%E3%82%A2%E3%82%B7%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%88/lojgmehidjdhhbmpjfamhpkpodfcodef

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

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

https://chromewebstore.google.com/detail/lipsum-generator/fepopmflofkppphpkfjdbmimglkeifna

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

### 2-2. Autofill

https://chromewebstore.google.com/detail/autofill/nlmmgnhgdeffjkdckmikfpnddkbbfkkk

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

# 3. サーバーサイド開発時に使える拡張機能 (3選)
### 3-1. Talend API Tester

https://chromewebstore.google.com/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm

:::note info
**【APIクライアントツール】**
**===　利用ユーザー数: 約600,000　評価: ★4.8　===**
WebAPIのテストクライアントです。
以下のように使い分けることもできます。
* ブラウザ → Talend API Test
* アプリ → Postman
* VS Code → REST Client
:::

### 3-2. Save Code

https://chromewebstore.google.com/detail/save-code/annlhfjgbkfmbbejkbdpgbmpbcjnehbb?hl=ja

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

### 3-3. Python Shell

https://chromewebstore.google.com/detail/python-shell/gdiimmpmdoofmahingpgabiikimjgcia?hl=ja

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

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

https://chromewebstore.google.com/detail/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja

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

### 4-2. CSSViewer

https://chromewebstore.google.com/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=ja

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

https://chromewebstore.google.com/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj

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

https://chromewebstore.google.com/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb

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

https://chromewebstore.google.com/detail/visbug/cdockenadnadldjbbgcallicgledbeoc

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

https://chromewebstore.google.com/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh?hl=ja

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

https://chromewebstore.google.com/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf?hl=ja

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

https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja

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

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja

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

https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja

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

### 4-11 Vue.js devtools

https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja

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


### 4-12. GTM Sonar

https://chromewebstore.google.com/detail/gtm-sonar/iiihoahkpncaheicjfemhjkkfamcahcd?hl=ja

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

### 4-13. SEO Pro Extension

https://chromewebstore.google.com/detail/seo-pro-extension/lajfdngpocmchpihjecojjllfjeehgnl

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


### 4-14. EditThisCookie

https://chromewebstore.google.com/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg

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


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

https://chromewebstore.google.com/detail/gcp-console-colorize/higjahjicmccalicmgfpokdmooopdhej?hl=ja

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

https://chromewebstore.google.com/detail/aws-console-regions-color/gfeaclafcmbiakopneapkbaiifnhbkng?hl=ja

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

https://chromewebstore.google.com/detail/colorize-aws-cloudwatch-l/fkagnmcbeokmapmcbecbcmpccmlbhkpl?hl=ja

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

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

https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl

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

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

https://chromewebstore.google.com/detail/qr%E3%82%B3%E3%83%BC%E3%83%89%E4%BD%9C%E6%88%90%E5%99%A8-quick-qr/afpbjjgbdimpioenaedcjgkaigggcdpp?hl=ja

:::note info
**【QRコード生成ツール】**
**===　利用ユーザー数: 約500,000 　評価:4.9 ★　===**
ページをそのままQRコードにしたり、文章やURLをQRコードにすることが可能です。
:::
### 6-3. 素晴らしい画面の並べ替えとスクリーンショット

https://chromewebstore.google.com/detail/%E7%B4%A0%E6%99%B4%E3%82%89%E3%81%97%E3%81%84%E7%94%BB%E9%9D%A2%E3%81%AE%E4%B8%A6%E3%81%B9%E6%9B%BF%E3%81%88%E3%81%A8%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ja

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


# 7. 調査に使える拡張機能(7選)
### 7-1. Wappalyzer - Technology profiler

https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg?hl=ja

:::note info
**【利用技術の特定ツール】**
**===　利用ユーザー数: 約2,000,000 　評価: ★4.6　===**
サイトで利用されている技術を特定することができます。
以下のような情報を取得できます。
* コンテンツ管理システム
* eコマースプラットフォーム
* Webフレームワーク
* サーバーソフトウェア
* 分析ツール
:::
### 7-2. daily.dev

https://chromewebstore.google.com/detail/dailydev-the-homepage-dev/jlmpjdjjbgclbocgajdjefcidcncaied?hl=en

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

:::
### 7-3. OctoLinker

https://chromewebstore.google.com/detail/octolinker/jlmafbaeoofdegohdhinkhilhclaklkp

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

https://chromewebstore.google.com/detail/search-result-previews/cedcejfiniojnlhlfhcppenochinijfo

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

### 7-5. AutoPagerize

https://chromewebstore.google.com/detail/autopagerize/igiofjhpmpihnifddepnpngfjhkfenbp

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

### 7-6. DeepL翻訳

https://chromewebstore.google.com/detail/deepl-translate-reading-w/cofdbpoegempjloogbagkncekinflcnj?hl=ja

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

### 7-7. ato-ichinen

https://chromewebstore.google.com/detail/ato-ichinen/pojaolkbbklmcifckclknpolncdmbaph?hl=ja

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


# 8. 情報整理に使える拡張機能(4選)
### 8-1. ChatGPT to Notion

https://chromewebstore.google.com/detail/chatgpt-%E3%81%8B%E3%82%89-notion-%E3%81%B8/oojndninaelbpllebamcojkdecjjhcle?hl=ja

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

https://chromewebstore.google.com/detail/chathub-%E3%82%AA%E3%83%BC%E3%83%AB%E3%82%A4%E3%83%B3%E3%83%AF%E3%83%B3%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%83%9C%E3%83%83%E3%83%88%E3%82%AF%E3%83%A9%E3%82%A4/iaakpnchhognanibcahlpcplchdfmgma?hl=ja

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

### 8-3. Power Tools for Chat GPT

https://chromewebstore.google.com/detail/%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E3%81%AEchatgpt%E3%83%97%E3%83%A9%E3%82%B9/jkfkhkobbahllilejfidknldjhgelcog?hl=ja

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

### 8-4. Keepa

https://chromewebstore.google.com/detail/keepa-amazon-price-tracke/neebplgakaahbhdphmkckjjcegoiijjo?hl=ja

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



# 注意事項
### 拡張機能をインストールし過ぎるとChromeが重くなる
拡張機能のインストールのし過ぎは、メモリ不足になるため、Chrome本来の操作感に影響が出る可能性があります。
利用しない拡張機能は、offにしたり、削除することが大切です。
### セキュリティ・リスク
信頼できる拡張機能のみを利用するようにしましょう。
悪意のあるパブリッシャーが作成した拡張機能を使ってしまうことがないよう、利用ユーザー数やレビューをちゃんと見るのが大事です。
### 定期的に更新する
アップデートをする目的は、機能改善、不具合改修だけではなく、新たなセキュリティリスクへの対策にもなります。

# 最後に
::: note
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、[こちら](https://www.recruit.nuco.co.jp/?qiita_item_id=1887820e3e8b98591a6d)まで。
:::
https://www.recruit.nuco.co.jp/?qiita_item_id=1887820e3e8b98591a6d