開発使える便利なChrome拡張機能

## はじめに
自分がプログラミング学習を進めるうえで、これよかった・面白かったと思うChromeの拡張機能をまとめた備忘録( ..)φ
フロントエンド系の拡張機能が多め

## 開発共通

### JSON Formatter

改行のないJSONを見やすく整形してくれる

https://chromewebstore.google.com/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?pli=1

### GoFullPage - Full Page Screen Capture

DevToolsだとスクリーンショットを撮りきれないときがあるけど
これ使うときっちり全画面スクショとれる

撮ったスクショをそのまま画像としてコピペしたりPDFにしたりできる

https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=ja

## 情報収集

### RSS Feed Reader

気になる技術情報サイトやテックブログを登録して一気に見られる

https://chromewebstore.google.com/detail/rss-feed-reader/pnjaodmkngahhkoihejjehlcdlnohgmp?hl=ja&utm_source=ext_sidebar

### Wappalyzer - Technology profiler

各サイトの技術スタックが見られる
単純に見ていて面白いし参考になる

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

### DeepL

ブラウザの直訳だとわかりづらい英語の文献とかをいい感じに翻訳してくれる

https://chromewebstore.google.com/detail/deepl%EF%BC%9Aai%E7%BF%BB%E8%A8%B3%E3%81%A8%E6%96%87%E7%AB%A0%E4%BD%9C%E6%88%90%E3%83%84%E3%83%BC%E3%83%AB/cofdbpoegempjloogbagkncekinflcnj?hl=ja

こんな感じで翻訳したい範囲だけ翻訳できるので便利

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667288/31d374b9-135f-f20e-7b80-b8b285276f19.png)
引用：https://www.typescriptlang.org/

### Save to Pocket
後で見たいサイトを一時保存しておける
これでタブがいっぱい開いていて何がどこにあるかわから～ん！を減らせる

https://chromewebstore.google.com/detail/save-to-pocket/niloccemoadcdkdjlinkgdfekeahmflj?hl=ja&utm_source=ext_sidebar

### Sider: ChatGPT サイドバー + GPT-4o, Claude 3.5, Gemini 1.5 & AIツール

サイドバーでChatGPTと会話しながら作業できる
サイトの要約とかすぐにできて便利

https://chromewebstore.google.com/detail/sider-chatgpt-%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC-+-gpt/difoiogjjojoaoomphldepapgpbgkhkb?hl=ja&utm_source=ext_sidebar

## フロントエンド関連
### TDK Meta Checker
meta情報の確認に使う
og:imageが正常に設定されているかどうかの確認に使う

https://chromewebstore.google.com/detail/tdk-meta-checker/kjiieeppkcjgdigogiafneikdhpagpbc?hl=ja

### SEO META in 1 CLICK
meta情報の確認に使う
サイトで使っているhタグの個数がわかったり、リンク一覧が見られたりする。
titleやdescriptionの文字数が適切でない場合は、赤字で警告っぽく表記される。

https://chromewebstore.google.com/detail/seo-meta-in-1-click/bjogjfinolnhfhkbipphpdlldadpnmhc?hl=ja&utm_source=ext_sidebar

### Responsive Viewer
SPなどのレスポンシブデザインの確認に使う

https://chromewebstore.google.com/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=ja&utm_source=ext_sidebar

### モバイルシミュレーター - レスポンシブテストツール
これもSPなどのレスポンシブデザインの確認に使う
個人的にはこの拡張機能が見やすくて好き

https://chromewebstore.google.com/detail/%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC-%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%86%E3%82%B9%E3%83%88%E3%83%84%E3%83%BC%E3%83%AB/ckejmhbmlajgoklhgbapkiccekfoccmk?hl=ja&utm_source=ext_sidebar

### ColorZilla
サイトで使われているカラーコードの確認に使う
これ楽しくてすき

https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja&utm_source=ext_sidebar

### WhatFont
サイトで使われているフォント・フォントサイズ・ウェイト・カラーなどがわかる
これも面白くてすき

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

### HeadingsMap
hタグが適切に設定されているか確認するのに使う
各見出しが階層で表示されるので見やすい

https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=ja&utm_source=ext_sidebar

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667288/9ca1a189-9c60-8472-9575-5d142d8b453d.png)

### Lighthouse
パフォーマンス改善に利用する
PageSpeedInsightsのレポートが出力できたりする

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

## バックエンド関連
### Talend API Tester - Free Edition
APIのテストに使う

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

## その他

### Custom Cursor for Chrome™ - カスタムカーソル

人に何かを説明したいとき、大き目のカーソルに設定しておくと見やすい。
（個人的には、よくモニター上でカーソルを見失うので大きめのカーソルを使っている）

https://chromewebstore.google.com/detail/custom-cursor-for-chrome/ogdlpmhglpejoiomcodnpjnfgcpmgale?hl=ja&utm_source=ext_sidebar

# さいごに

改めて拡張機能を使ったことのある拡張機能を整理してみたら、使いこなせていない機能も多いなと思った🤔そして、拡張機能を使いこなしてもっと作業効率上げられたら面倒に感じる作業も楽しくできそう・・・？！


他にもたくさん便利な拡張機能はあると思うので、これからも時間があるときに探して試してみたい！