エンジニアにおすすめのChrome拡張機能20選

「仕事を効率化したい」エンジニアさん必見！
仕事を効率化できるGoogle Chromeの拡張機能20選をご紹介します。
この拡張機能を入れると作業効率が爆上がりすること間違いなしです。

## Chromeの拡張機能とは？

Chrome拡張機能とは、Chromeブラウザに機能を追加することができるプログラムファイルのことです。
基本的には無料で使用できますが、中には有料のものもあります。

## おすすめの拡張機能20選

### 1.**CSSViewer**

![スクリーンショット 2023-08-16 17.49.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/f80b652b-7260-4fb1-b7be-ddd89d8f9a8b.png)

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

閲覧しているウェブサイトで、マウスオーバーによってCSSプロパティを表示できる優れもの

### 2.****HTMLエラーチェッカー****

![スクリーンショット 2023-08-16 17.47.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/61e1846c-8e1d-6096-83b5-185fdfb11a2d.png)

https://chrome.google.com/webstore/detail/htmlエラーチェッカー/ohdllebchmmponnofchalfkegpjojcaf?hl=ja

HTMLの開始・終了タグの過不足などを検出する拡張機能。エラーがある場合、数値が表示されルようになっています

### 3.****DevTools Author****

![スクリーンショット 2023-08-16 17.48.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/105da334-fd05-10e6-6c0d-a3fb90b7770f.png)

https://chrome.google.com/webstore/detail/devtools-author/egfhcfdfnajldliefpdoaojgahefjhhi?hl=ja

KinzaやChromeデベロッパーツールのエディタのカラーやフォントを変更ができます

### 4.****WhatFont****

![スクリーンショット 2023-08-16 17.50.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/b38c132e-0232-e6f6-3f58-65dc7cd9b93e.png)
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja

調べたいテキストの上にマウスオーバーをするだけでフォントの種類がわかります

### 5.****Copy All URLs****

![スクリーンショット 2023-08-16 17.53.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/6e61425f-7d02-5854-f933-6ed81a989c30.png)

https://chrome.google.com/webstore/detail/copy-all-urls/djdmadneanknadilpjiknlnanaolmbfk?hl=ja

大量に開いたタブのURLを一括コピーすることができます

### 6.****1Password****

![スクリーンショット 2023-08-16 17.51.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/cb5ef6cc-ba7a-3fc5-5bcb-8abf956e2e67.png)

https://chrome.google.com/webstore/detail/1password-–-password-mana/aeblfdkhhhdcdjpifhhbdiojplfjncoa?hl=ja


ウェブブラウザで1Passwordを使うための拡張機能。こちらを使用するには1Passwordのメンバーなる必要があります。

### 7.****ato-ichinen****

![スクリーンショット 2023-08-16 17.52.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/b41eca6a-2612-96b6-fff4-aa59351fa09f.png)

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

検索結果を1年以内、24時間以内など検索結果で表示される情報を最新のものだけにできます

### 8.**Pasty**

![スクリーンショット 2023-08-16 17.52.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/05321e87-16ef-9df7-9425-f3f9a64229f7.png)
https://chrome.google.com/webstore/detail/pasty/hdjihnnclpjhfdbbinmgoiehhoehhlgf?hl=ja

URLをコピーしてPastyアイコンをクリックするだけで複数のリンクを一気に開けます。

### 9.**Web Maker**

![スクリーンショット 2023-08-16 17.54.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/5db73fac-96ad-48ed-0fea-ce380fa79664.png)


https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh

リアルタイムで結果をチェックできるライブコーディングが可能

### 10.**Quick QR**


![スクリーンショット 2023-08-16 17.54.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/8bb27fd9-7cce-63fa-8902-9698b61b0785.png)

https://chrome.google.com/webstore/detail/qr-code-generator/afpbjjgbdimpioenaedcjgkaigggcdpp?hl=ja

ページや文章やＵＲＬからでもＱＲ作成ができ、スマートフォンで確認することができます

### 11.****ブックマークサイドバー****

![スクリーンショット 2023-08-16 17.55.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/2cb0da73-49cb-27b5-2169-470e5a2fda59.png)

https://chrome.google.com/webstore/detail/bookmark-sidebar/jdbnofccmhefkmjbkkdkfiicjkgofkdh?hl=ja

デフォルトのChromeにはサイドバーを表示する機能がないのですが、こちらを使うと画面の片側をクリックしてブックマークサイドバーを出せるようになります。

### 12.**OneTab**

![スクリーンショット 2023-08-16 17.56.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/eef14382-7205-d441-f4e8-c3366a3fcbff.png)

https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall?hl=ja

開いているページをリスト化し１つにまとめることができます。

### 13.**Wappalyzer**

![スクリーンショット 2023-08-16 17.57.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/93e2ca3f-9f48-9e3b-7d38-d94fcb62c5a9.png)

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

閲覧しているサイトで使用している言語やソフトウェア、フレームワークを一覧表示できます。

### 14.****Awesome ScreenShot****

![スクリーンショット 2023-08-16 17.58.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/e4747cc0-f45d-24d2-d355-db6a2c141885.png)

https://chrome.google.com/webstore/detail/awesome-chatgpt-screensho/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ja

Chromeで開いているウェブサイトのページのスクリーンショットを撮影だけでなく、録画もしてくれます。

### 15.**Gyazo**

![スクリーンショット 2023-08-16 17.59.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/ae1f33ca-7b35-eec1-8afe-7a6b0fc92279.png)

https://chrome.google.com/webstore/detail/gyazo-share-new-screensho/ffdaeeijbbijklfcpahbghahojgfgebo?hl=ja

Chromeで開いているウェブサイトのページのスクリーンショットを撮影し、撮ったスクリーンショットをURLで共有することが可能です。

### 16.****EVERNOTE WEB CLIPPER****

![スクリーンショット 2023-08-16 18.00.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/e61b8978-ccde-4a92-fd8f-c7ab2e665ff7.png)

https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc?hl=ja

Web上で見つけたページをクリップしてEvernoteに保存できます。

### 17.****Create Link****

![スクリーンショット 2023-08-16 18.00.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/64db2f96-d809-f21f-dc35-207138997136.png)

https://chrome.google.com/webstore/detail/create-link/gcmghdmnkfdbncmnmlkkglmnnhagajbm?hl=ja

閲覧しているページのリンクを選択した形式（プレーンテキスト、HTML、Markdown記法、MediaWiki記法）でクリップボードにアウトプットにしてクリップボードにコピーできるようになります。

### 18.****Linkclump****

![スクリーンショット 2023-08-16 18.01.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/d5722d44-b99c-9ba0-428e-4fce3d1e18ac.png)

https://chrome.google.com/webstore/detail/linkclump/lfpjkncokllnfokkgpkobnkbkmelfefj?hl=ja

複数のリンクを同時に開いたり、コピーしたり、ブックマークしたりできます

### 19.**Lighthouse**

![Untitled (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/660e4052-46dd-4323-03ef-23e3d83e7652.png)

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

自分で作ったウェブサイトのパフォーマンスを「パフォーマンス」「アクセシビリティ」「ベストプラクティス」「SEO」「プログレッシブアプリケーション」の5つの項目ごとに測定できます。

### 20.****Image Downloader Plus****

![スクリーンショット 2023-08-16 18.01.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3456084/9423e103-eab0-86b7-088d-e57a2aa01c98.png)

https://chrome.google.com/webstore/detail/image-downloader-plus/leamagadjachdbplmbipaglomnkemped?hl=ja

ワンクリックするだけで、閲覧しているページに表示されている全ての画像を一括ダウンロードが可能に

## 参考サイト

****[エンジニアにおすすめしたいChrome拡張機能まとめ](https://career.levtech.jp/guide/knowhow/article/404/)****
****[Chrome拡張機能のおすすめ25選｜作業効率UPに役立つ機能を厳選紹介！](https://onechat.jp/blog/archives/1175)****
**[フロントエンドエンジニアにおすすめのChrome拡張機能15選！](https://haniwaman.com/chrome-extensions/)**

------------------------

▼Twitterでも発信しています
https://twitter.com/issueissue4
▼エンジニア向け案件獲得プラットフォーム
https://i-ssue.com/users/signup

＼ エンジニア募集のお知らせ ／
【3ヶ月限定】次世代の開発発注プラットフォーム「ISSUE」を開発してくれるテックリード募集
https://i-ssue.com/issues/d179971e-cfae-46ba-a32b-d550a7da4660l