2019年版Chrome拡張機能まとめ

一日10時間(≒業務時間)以上chromeを眺め続ける私のchrome拡張機能をまとめました。

# 環境(2019年1月29日現在)
MacOS 10.14.2
GoogleChrome 71.0.3578.98

# ブラウジング編
## Adblock Plus
![adblock.png](https://qiita-image-store.s3.amazonaws.com/0/131949/37fbdbe9-6e7e-4c7d-f0b3-290686b6bf46.png)

いわゆる広告削除ツールです。
アドブロックと呼ばれるものはいくつかありますが、長年これを愛用しています。
ホワイトリストも使えるので、広告運用中はgoogle,yahooなどを設定したりもします。
[Adblock Plus - free ad blocker](https://chrome.google.com/webstore/detail/adblock-plus-free-ad-bloc/cfhdojbkjhnklbpkdaibdccddilifddb)

## Google Analytics オプトアウト
![ga.png](https://qiita-image-store.s3.amazonaws.com/0/131949/18e70c23-91f2-9fda-0639-29c1ca3bc585.png)

いわゆるアナリティクス避けです。
自分のアクセスやフォーム登録などをgoogleアナリティクスに残さないようにできるのでとても便利です。
[Google Analytics オプトアウト アドオン (by Google)](https://chrome.google.com/webstore/detail/google-analytics-opt-out/fllaojicojecljbmefodhfapmkghcbnh)

## Google 翻訳
![gh.png](https://qiita-image-store.s3.amazonaws.com/0/131949/5d00c2e9-8b91-a4d9-1067-8b92af69fa41.png)
ページ中の文字を選択して、翻訳ができます。
データベースをいじるときのカラム名設定やwebページ製作時のクラス設定時にも重宝しています。
[Google 翻訳](https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb)

## goodbye "Zenkaku"
![zenkaku.png](https://qiita-image-store.s3.amazonaws.com/0/131949/80e64d5d-8de2-172c-67be-4e782ec5d151.png)
ページ中の全角英数文字を半角に置換してくれます。
ずっと使っているのでもはや気にしたこともありませんが、たまにスマホであの幅広の英数字を見るとなかなかに辛いものがありますね。
[goodbye "Zenkaku" - さよなら全角英数](https://chrome.google.com/webstore/detail/goodbye-zenkaku-%E3%81%95%E3%82%88%E3%81%AA%E3%82%89%E5%85%A8%E8%A7%92%E8%8B%B1%E6%95%B0/mjdgifdhhligineaimmgbikndpifdgml)

## Tabs to the Front
![tab.png](https://qiita-image-store.s3.amazonaws.com/0/131949/76d8182b-ab29-7aa2-9052-19c0d76121fa.png)
右クリックで「新しいタブで開く」を選択したときにそのタブを前面に表示してくれます。
右クリックしたその時そのページをその瞬間に見たいのに、どうしてタブが前面に来てくれないの！を解決してくれます。
[Tabs to the Front](https://chrome.google.com/webstore/detail/tabs-to-the-front/hiembaoomcehoiehhdldabfgnmphappc)

## JSON Viewer
![json.png](https://qiita-image-store.s3.amazonaws.com/0/131949/edc8f955-fa11-11ba-0505-b73577399d81.png)
ブラウザでJSONを表示したときに見やすく整形してくれます。
仕事柄、Jsonを返すAPIを沢山触るのですが、ネストが深くなればなるほどどのデータを見ればいいのかわからなくなるので、とても便利です。
スタイルを自分好みにカスタマイズできるのもお気に入りポイントです。
[JSON Viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh)

## goo.gl URL Shortener
![url.png](https://qiita-image-store.s3.amazonaws.com/0/131949/a8793b54-0362-0b7e-0619-3df8f9778472.png)
メールやツイートにurlを貼り付けたいけど、長すぎる！
そんなときはこれです。
日本語URLなどは特に長くなってしまうので助かります。
[goo.gl URL Shortener (Unofficial)](https://chrome.google.com/webstore/detail/googl-url-shortener-unoff/iblijlcdoidgdpfknkckljiocdbnlagk)

#ツール系
## Checker Plus for Gmail™
![gmail.png](https://qiita-image-store.s3.amazonaws.com/0/131949/79939a60-6b0c-cfd3-744b-5d4116401cee.png)
gmailの通知用ツールです。
複数アカウントの登録も可能なので、「メール、気づきませんでした。。。」の多い私には必須です。
[Checker Plus for Gmail™](https://chrome.google.com/webstore/detail/checker-plus-for-gmail/oeopbcgkkoapgobdbedcemjljbihmemj)

## Add feed to Slack
![feed.png](https://qiita-image-store.s3.amazonaws.com/0/131949/244624bd-92c1-d85b-5fba-5d6a4d7200ba.png)
web版slackにログインしておけば、ワンクリックでそのページのRSSをslackに通知することができます。
登録できない（RSSを持っていない）ページもあるのでご注意ください。
[Add feed to Slack](https://chrome.google.com/webstore/detail/add-feed-to-slack/enphccllegeclhdejajmfbjofdhabahk)

## ColorPick Eyedropper
![color.png](https://qiita-image-store.s3.amazonaws.com/0/131949/a8f13f1c-5534-33e9-8056-be0586045be3.png)
webページ上の色のカラーコードを取得できるツールです。
ピクセル単位でズームしてくれるので、小さい部分でも取得できます。
[ColorPick Eyedropper](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg)

## FireShot
![fireshot.png](https://qiita-image-store.s3.amazonaws.com/0/131949/a0a6986a-77c3-4ae5-c72e-ac4d60f7737c.png)
スクリーンショットツールもかなりの種類がありますが、これは「ページ全体」をスクリーンショットできます。
スクロールが必要なページでも全体を画像として取得できるので、ページ遷移図を作るときなどはとても便利です。
[ウェブページ全体をスクリーンショット - FireShot](https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg)

## EditThisCookie
![cookie.png](https://qiita-image-store.s3.amazonaws.com/0/131949/8c139f49-df78-f34b-6c14-3d11b88b7c43.png)
これは少しニッチなツールですが、ページで発行されたcookieを確認できます。
ログイン機能を作るときなどに便利です。
[EditThisCookie](https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg)

## The QR Code Extension
![unnamed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131949/675f5047-ebbb-3d29-f158-be60b900a1d9.png)
今見ているそのページのURLをQRコードにしてくれます。
~~「スマホでこのページが見たい！でも共有が手間。。。」という私の悩みを見事に解決してくれました。~~

※2019/10/04現在
Chromeに「リンクをデバイスに送付」なる機能ができたんですね。
自分の端末以外でテストする場合等にお使いくださいm(_ _)m

[The QR Code Extension](https://qiita.com/ShoutaWATANABE/items/a0ed5d22de7c48121911)

# github系
## Octotree
![octo.png](https://qiita-image-store.s3.amazonaws.com/0/131949/9105f821-1f84-49a6-8139-a45dae885a8b.png)
リポジトリ内のフォルダ・ファイルをツリー表示できます。
非公開リポジトリは少し設定が必要です。
[Octotree]https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc?hl=en-US

## GitHub Repository Size
![size.png](https://qiita-image-store.s3.amazonaws.com/0/131949/7e2a253b-ea6c-9ffc-d7a5-cbf0bfc11da0.png)
ファイルサイズ表示が追加されます。
[GitHub Repository Size](https://chrome.google.com/webstore/detail/github-repository-size/apnjnioapinblneaedefcnopcjepgkci)

## File Icon for GitHub, GitLab and Bitbucket
![icon.png](https://qiita-image-store.s3.amazonaws.com/0/131949/52c8178a-200d-acf6-8bc7-35c127a689af.png)
ファイルの種類に応じてアイコンが表示されます。
[File Icon for GitHub, GitLab and Bitbucket](https://chrome.google.com/webstore/detail/file-icon-for-github-gitl/ficfmibkjjnpogdcfhfokmihanoldbfe)

# その他のツール
## Q Accelerator
![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/131949/7fdf103b-f8cc-12fa-6c2b-6e05fccbd790.png)
qiitaに各種機能を追加するツールです。
一日の殆どをqiitaを見て過ごす私には必須のツールです。
[Q Accelerator](https://chrome.google.com/webstore/detail/q-accelerator/mheleidccioamimekojienbdfclcbaan)

## Twitcher
![twitcher.png](https://qiita-image-store.s3.amazonaws.com/0/131949/c0c1e50c-61e6-9f82-4688-6fa1b2e2bc0b.png)
web版twitterで複数アカウントを簡単に切り替えられる様になるツールです。
便利に使っているとついついIDとパスワードを忘れてしまうので、注意が必要です。
[Twitcher - Twitter Account Switcher](https://chrome.google.com/webstore/detail/twitcher-twitter-account/gmngpagflejjoblmmamaonmnkghjmebh)

## はてなブックマーク
![hatena.png](https://qiita-image-store.s3.amazonaws.com/0/131949/07c01211-10fd-bba8-9341-11d13dc816a6.png)
はてなブックマークの公式拡張機能です。
自分がブックマークしたいページを簡単に登録できます。
[はてなブックマーク](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)

## Web Maker
![web.png](https://qiita-image-store.s3.amazonaws.com/0/131949/a67ba46d-8783-27a8-bfff-435e9ffcc3ce.png)
最後にはなりましたが、これがすごくおすすめです。
簡単に言えば、web上でwebページ制作ができます。
しかも、htmlだけでなく、css,jsはもちろん、pugやsass、coffeescriptなどにも対応してるんです。
さらに、エディタにはvimモードまでついているというシロモノ。
是非一度インストールしてみてください。
[Web Maker](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh)

# あとがき
いかがでしたか？
実際記事にしてみて、思ったより少ないなと思いました。
chromeにはまだまだ拡張機能がたくさんありますし、いつか自分で作ってみたいなとも思うくらい、自由度を拡張性が高いです。
この記事をきっかけに、さらに便利な自分だけのchromeを作って、快適なchromeライフを送って欲しいなと思います。