【Chrome拡張】Web開発2年目の自分が使っているブラウザ拡張をまとめてみた

# 開発作業が捗るブラウザ拡張まとめ

普段、開発などで使っているChrome拡張をまとめてみました。
おすすめの拡張などあればコメント欄で教えていただけると嬉しいです。

※画像は全て公式サイトから引用しています。

## [JSONView](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/related)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173746/5b36697b-63a7-f30a-a1ed-f4e2276dad55.png)




## [Nimbus Screenshot & Screen Video Recorder](https://chrome.google.com/webstore/detail/nimbus-screenshot-screen/bpconcjcammlapcogcnnelfmaeghhagj)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173746/7cfee814-fcbc-532c-009d-83de65d99e92.png)

スクリーンショットを作成・保存するための拡張。撮影範囲を細かく指定できる。画像の編集（テキスト追加など）も簡単。UIに関する仕様などで人と話す時に使用しています。

## [Vimium](https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb)

![](https://youtu.be/t67Sn0RGK54)

Vimのキーバインドでブラウザ操作をするための拡張。
一部のVimmerに人気の模様。
自分は入れているだけでほとんど使っていないです（笑）

## [Dark Reader](https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh)

Webページをダークモードにするための拡張。
Webサイトがダークモードに対応してなくてもこれを使えば画面を真っ黒にできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173746/c53fc0c8-d0de-76d5-c4f7-1dbbf0551ec0.png)

## [Google 翻訳](https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173746/c3708cd1-8438-5cb6-f750-eaf838b6ea2a.png)

技術記事を翻訳するときなどに使用。ページ中の文を選択するとその部分だけの翻訳をポップアップで見ることができるので、
文章を部分的に訳を確認したいときに便利です。

## [Python Shell](https://chrome.google.com/webstore/detail/python-shell/gdiimmpmdoofmahingpgabiikimjgcia)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173746/6dca83b7-6051-0f86-f4d7-3251a5eab8ef.png)

Pythonをブラウザ上で実行できる拡張。最新版ではPython 3.7.4が使える。
あの構文使えるかなー？って時に実際に動かして確認するのに便利。

### [マリナラ：Pomodoro® アシスタント](https://chrome.google.com/webstore/detail/marinara-pomodoro®-assist/lojgmehidjdhhbmpjfamhpkpodfcodef)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173746/5b5f2131-956e-3100-44ad-2dbf4f7c4c2b.png)

作業時間管理のためのツール。
「25分の集中時間 => 5分休憩のサイクル」で時間を管理するためのタイマー。

### [Octotree](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173746/269efeea-9670-3ff5-9c10-c0ad8f98d919.png)

GitHubのレポジトリのディレクトリツリーをエディターのペインのように閲覧することができるようにする拡張です。

### [はてなブックマーク](https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF/dnlfpnhinnjdgmjfpccajboogcjocdla)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173746/b76a38c6-6c0f-9e8c-8a69-b91fed6a21be.png)


グーグル検索の結果でブックマーク数をタイトルの隣に表示したり、Webページをブックマークして保存したりするための拡張。
ブックマーク数が多い記事は役に立つものが多い気がするので、調べものをするときに重宝してます。

ブックマーク自体は後述のRaindropを使っています。

### [Raindrop](https://chrome.google.com/webstore/detail/raindropio/ldgfbffkinooeloadekpmfoklnobpien)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173746/bfe1f545-4b4b-4919-bd57-dff48c3ba985.png)
以前ははてぶを使っていたが、最近乗り換えました。
使いやすくて、ブックマークした記事が見やすいのがお気に入り。
ちなみにWebサイトではプログラマーのために作られたと謳っています。

### iCloud Dashboard
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173746/2e21a828-75d7-68b6-e247-9612d98cfab2.png)

拡張からメモやメールなどのiCloudサービスのWebページに飛ぶだけの拡張ですが、意外に便利。

## [Todoist](https://chrome.google.com/webstore/detail/todoist-for-chrome/jldhpllghnbhlbpcmnajkpdmadaolakh)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173746/64285fa3-313c-fce0-9915-7f6cb503e56b.png)

ToDoリストのサービスTodoistの拡張。同類のサービスも多いですが使いやすいのでメインで使っています。

## [Toggle JavaScript](https://chrome.google.com/webstore/detail/toggle-javascript/cidlcjdalomndpeagkjpnefhljffbnlo)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173746/83dfd9cf-43bd-26a6-a155-86e91da64cd4.png)

WebページでJSの無効/有効の切り替えができる。

## [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173746/0f7f53f7-93e6-2e53-6311-43841e3dd468.png)

VueのデータやVue Router関連のパラメータ、Vuexのステートの確認を開発ツールから確認できるようにする拡張。
データが思い通りに表示されない時などのデバッグ時にとても役立ってます。