【非エンジニアにも見て欲しい】Chrome拡張機能でストレスを無くせええ〜〜〜！！

ジョブカン、アドベントカレンダー12日目です:ok_hand:

# はじめに

はじめまして、ジョブカン**入社27日目**の@hoge-maru-taroです。

私はエンジニアとして、一日中PCと睨めっこすることを生業としております。
そして弊社はいわゆるIT系の企業ということで、従業員ほとんどの方が日常的にPCを使ってお仕事をしていることでしょう。
中でもブラウザを使っての作業が一日の大半を占めている方も多いかと思います。
つまり、「**ブラウザの使い勝手や効率が、日々の疲労やストレスに直結している**」と言って過言ではないでしょう。（断言）

この記事では、常習的にChromeストアを彷徨っている私が、皆さまのブラウザに対して抱えているストレスを少しだけ解決できる拡張機能を紹介していきます。

要は「**ぼくのえらんだ、さいきょうのかくちょうきのう！**」です。

これを読んだ方のストレスがほんの少しでも減り、作業効率がアップし、定時ダッシュをかます幸せな人が増えれば嬉しい限りです。

## Stylus
Googleの検索ページ、やたら左寄りだと思ったことはないでしょうか？（**思想的なことではなく**）
私は持っていませんが、ワイドディスプレイを使ってる場合はどうなっているんでしょう...。

![スクリーンショット 2023-12-07 22.00.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/273547a6-34b1-68cd-8755-af1588863e1a.png)
> 必要な情報は赤い部分に全て集約されている

むしろこれが当たり前過ぎて何も感じていない方もいるかも多いかもしれません。
なにが楽しくて画面の左ばかり見させられているんでしょうか、意味不明です。

この拡張機能を使えば検索結果が画面中央に表示され一気に見やすくなります。

![スクリーンショット 2023-12-07 22.11.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/96616609-ee07-afc2-38f3-45a5128f1501.png)

> 検索結果が中央配置に！これは嬉しい！ステキ！

要はcssを書き換えて見た目を変えてしまおう、という拡張機能。
他にも、よく見るサイトで邪魔な要素があれば非表示にできたり、わりと使い道があります。

[このサイト](https://zslec.medium.com/google%E3%81%AE%E6%A4%9C%E7%B4%A2%E7%B5%90%E6%9E%9C%E3%82%92%E4%B8%AD%E5%A4%AE%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%8B-903af1df762b)を見れば割と簡単に中央配置が実現できます。
極々稀に表示が崩れることがありますが、しっかりメンテナンスしてくれているので困った時は見に行くと良いです。
[Stylus](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja
)

## Dark Reader

![画面収録 2023-12-07 22.26.52.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/b81b13fd-4da0-baa8-4ea7-1b7604e1503d.gif)
> こりゃ魔法ダヨ！

長時間エディターを見ていると目が疲れるのでダークモード〜、でもChromeはギラギラに輝いている...って方は多いのではないのでしょうか？
この拡張機能は一瞬でwebサイトをダークモードにしてくれます（`Sift+Alt+D`で一撃！）

ダークモードを適応しないサイトを設定できるので、サイトにダークモードが用意されている場合（GitHubとかNotionとか）も見た目が不自然になることはありません。
遅くまでPCと向き合っている方は入れると寝付きが良くなることでしょう、多分。
[Dark Reader](https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=ja
)

## Workspace Launcher
![画面収録 2023-12-07 22.41.13.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/7921ec5f-1bf6-8a20-5ff2-ce32f6e9d9ad.gif)
> 毎日使えそうダネ！

登録したタブを一気に開くことができます。
複数のプロジェクトを掛け持ちしている場合、その都度色々なページをポチポチ開くのは面倒です。
一度登録してしまえば次からは一瞬で必要なページを開くことができます。

似たような拡張機能は他にもありますが、これが優れているのは「**タブを固定したまま開ける**」ところです。
私は特によく使うタブを固定して小さく開いているのですが、他の拡張機能だと通常のタブとして開かれてしまします。

![スクリーンショット 2023-12-07 22.53.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/a2ad75bf-ec21-d248-b73f-378a830156ad.png)

「**Workspace Launcherなら開いても固定タブは固定タブ、順番も変わらない、最高！！**」というワケです。

欠点として**デザインが地味**、というのが挙げられます。（シンプルではありますが...）
ので、私は自分でsccを書き換えてグラスモーフィズム風にカスタムしています。

![スクリーンショット 2023-12-07 22.50.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/8e72bcc9-6456-a549-123a-3b52997de5a3.png)
> これならおしゃれなMacにも似合っちゃう！！

余談ですが、カスタムついでにソースコードを見たところ、”ブックマークを表示する機能”を追加する形跡が見られたので、今後アップデートがあればそのような機能も使えるようになるかもしれません。
[Workspace Launcher](https://chrome.google.com/webstore/detail/workspace-launcher/nenchifcjkmfahicbjgpinmklenpfiih?hl=ja)

****

ここまでは**どんな職種の方にもおすすめできるイチオシの拡張機能**でしたが、ここからは開発者向けの拡張機能が多めになります。
流石に全部をこの熱量で書くのは辛いものがあるので、ここからはちょっと便利だったり楽しい拡張機能をサクサク紹介していきます。

## 開発
### JSON Viewer
ブラウザで使えるJson formatter
検索バーからAPIを叩いた時のレスポンスが見やすくなります（`jq`コマンド的な）

![スクリーンショット 2023-12-06 15.56.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/d2509bf4-e1a3-9942-09bb-68d0c1c993c0.png)
[JSON Viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ja)

### Talend API Tester
ブラウザ版Postman
本家よりシンプルですが、基本的なことはできます

![スクリーンショット 2023-12-06 15.54.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/042f18ae-b56e-7eee-f951-8eaf43692e6a.png)
[Talend API Tester](https://chrome.google.com/webstore/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm?hl=ja)

### ColorPick Eyedropper
Web上のカラーコードを確認できます

![スクリーンショット 2023-12-07 23.28.29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/f3097ac7-2180-cec9-10ba-525f68b94439.jpeg)
[ColorPick Eyedropper](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg)

### CSS Peeper
要素のclass名とか、サイズとか、フォントとか、色々わかる便利なやつ

![スクリーンショット 2023-12-07 23.30.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/f9ec5a0a-8c56-c556-8575-6d6bf38f75ed.png)
[CSS Peeper](https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=ja)

### Do Not Merge WIP for GitHub
プルリクのタイトルに「WIP」などが含まれている場合にマージボタンが無効化します
事故防止にどうぞ
[Do Not Merge WIP for GitHub](https://chrome.google.com/webstore/detail/do-not-merge-wip-for-gith/nimelepbpejjlbmoobocpfnjhihnpked)

### Emoji Keyboard by JoyPixels :kissing_heart:
かわいい絵文字を即コピーできます:v:
プルリクのConversationで使うと少しだけ楽しげになります:sunny:
前まで使っていた同じような拡張機能は肌の色までは選べなかったので、最近こっちに乗り換えました:couple_ww:
可愛いのでおすすめ、可愛いからおすすめ、可愛いです:heart_eyes:

![スクリーンショット 2023-12-07 23.54.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/823ffa7d-d4ce-0c65-b403-d13b6e63d0cd.png)
[Emoji Keyboard by JoyPixels](https://chrome.google.com/webstore/detail/emoji-keyboard-by-joypixe/ipdjnhgkpapgippgcgkfcbpdpcgifncb)

### GitHub Isometric Contributions
GitHubの”**草**”を3D表示にできます

![kusa_3d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/4a44ba9d-6dfe-4f69-03cc-bc2968c75de7.png)
[GitHub Isometric Contributions](https://chrome.google.com/webstore/detail/github-isometric-contribu/mjoedlfflcchnleknnceiplgaeoegien)

## 効率化
### Acid Tabs
複数のタブをサイトごとに好きな色と名前付きで分類できます
最初の方に書いた「Workspace Launcher」と併用しても破綻しません
気がつくと沢山のタブが開いている掃除下手さん必見
おすすめです

![画面収録 2023-12-08 0.09.55.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/c0b8d72f-9f62-e492-2cc6-4c12daeced44.gif)
[Acid Tabs](https://chrome.google.com/webstore/detail/acid-tabs/hgceopemmcmigbmhphbcgkeffommpjfc?hl=ja)

### AdGuard
広告ブロッカー
これが最強（さいつよ）

![unnamed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/44a13c57-c840-a97e-14b0-190742e90f56.png)
[AdGuard](https://chrome.google.com/webstore/detail/adguard-adblocker/bgnkhhnnamicmpeenaelnjfhikgbkllg?hl=ja)

### 1Password
超有名パスワードマネージャー

![unnamed (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/d5e65de7-b893-fa7a-adea-67a71912c702.png)
[1Password](https://chrome.google.com/webstore/detail/1password-%E2%80%93-password-mana/aeblfdkhhhdcdjpifhhbdiojplfjncoa?hl=ja)

### Safety for Gmail
Gmailの送信を取り消せるようになります
弊社は全員インストールしている（？）
[Safety for Gmail](https://chrome.google.com/webstore/detail/safety-for-gmail/pjbnfpohnepfohjeklbpeekacpellded?hl=ja)

### grt memo
ブラウザで使えるミニメモ帳
ちょっとしたことやよく見る内容をメモすると非常に便利（絶対に消えちゃまずいもの、セキュアなものは一応書かないほうが良いです。）
それでもかなりおすすめ

![スクリーンショット 2023-12-06 16.01.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/4c83a344-1d26-d5a3-0141-bce52c9e3aad.png)
[grt memo](https://chrome.google.com/webstore/detail/grt-memo/hjepgjomhnddghfkpoibmjpofhkbagkm?hl=ja)

### どこでもメモ
こちらもメモですが、画面にペタっと張り付くように追従してきます
サイズや色も選べるのでこれもかなり便利

![画面収録 2023-12-08 0.45.44 1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/9aca5caa-2cfe-3d5c-6c6b-6264779bcb3e.gif)
[どこでもメモ](https://chromewebstore.google.com/detail/%E3%81%A9%E3%81%93%E3%81%A7%E3%82%82%E3%83%A1%E3%83%A2/fjfoncfdjhdefjhknbaphionnognbnpl)

### DeepL翻訳
選択した文字を自動翻訳してくれます
課金するとページをまるっと翻訳してくれるはずが、支払いページで延々とエラーが出るので嫌いになった（）
[DeepL翻訳](https://chrome.google.com/webstore/detail/deepl-translate-reading-w/cofdbpoegempjloogbagkncekinflcnj?hl=ja)

### Pushbullet
Mac <-> Windows、Windows <-> iOSとかでテキストや画像、サイトの共有をしてくれる
ハードを複数台持っている方におすすめ

![unnamed.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/f94572da-a1be-678e-3c34-88f50f9099fe.jpeg)
[Pushbullet](https://chrome.google.com/webstore/detail/pushbullet/chlffgpmiacpedhhbkiomidkjlcfhogd?hl=ja)

### Superpower ChatGPT
ChatGPTをめっちゃいい感じにしてくれる（チャットのフォルダ分けとか会話のブックマークとか検索とかetc...）
多機能すぎて使いこなせていない、誰か使い方教えてください
[Superpower ChatGPT](https://chrome.google.com/webstore/detail/superpower-chatgpt/amhmeenmapldpjdedekalnfifgnpfnkc)

## カテゴリ不明の悲しいやつら
### GoFullPage
ページを1枚の縦に長〜いスクショにできる

![スクリーンショット 2023-12-08 1.08.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/e5637e91-5357-83a9-94bd-674f75882e34.png)
[GoFullPage](https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=ja)

### No Search For
検索ページの「他の人はこちらも検索」を非表示にしてくれる
[No Search For](https://chrome.google.com/webstore/detail/no-search-for/gfilnngoaebchcnkmppbnijaakeccdjc?hl=ja)

### uBlacklist
検索結果に表示させたくないサイトを非表示にできる
見たくないキュレーションサイトとかを登録しておくと検索結果の質が上がるはず
[uBlacklist](https://chrome.google.com/webstore/detail/ublacklist/pncfbmialoiaghdehhbnbhkkgmjanfhe?hl=ja)

## 娯楽
### Keeper
Amazonの商品の価格推移がグラフで分かる
「なんかこの商品定期的に安くなってるなあ、買うのは少し待つか」って使い方をしてます

![スクリーンショット 2023-12-06 16.06.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/8b688916-67d6-bd68-faae-5d0294eed813.png)
[Keeper](https://chrome.google.com/webstore/detail/keepa-amazon-price-tracke/neebplgakaahbhdphmkckjjcegoiijjo?hl=ja)

### Enhancer for YouTube
YouTubeの動画の明るさや速度...というか、多分思いつくことはほぼ全て設定できる
広告スキップの機能もあるが、これは今も使えるかは不明
（ちなみに、最近は**Youtubeの広告をブロックする拡張機能をブロックする機能をブロックする拡張機能**があるとかでめちゃくちゃになってるらしいです）

![スクリーンショット 2023-12-08 0.15.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/18b565fc-5a7f-f096-f0f5-ca6ea7429aa9.png)
[Enhancer for YouTube](https://chrome.google.com/webstore/detail/enhancer-for-youtube/ponfpcnoihfmfllpaingbgckeeldkhle?hl=ja)

### Return YouTube Dislike
YouTubeで今は亡きバッドの数を表示できる
正直あまり入れる意味はない...
[Return YouTube Dislike](https://chrome.google.com/webstore/detail/return-youtube-dislike/gebbhagfogifgggkldgodflihgfeippi?hl=ja)

****

時間と体力に余裕があれば私もなにか拡張機能を作ってみたいな〜と思っていたりいなかったり...

少々雑な〆ですがこれでお死枚♠
ぜひ楽しく快適な拡張機能ライフを！！！

![スクリーンショット 2023-12-08 0.51.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626228/d896d7c6-5315-c9a3-0930-49fbb0361138.png)

# お知らせ
DONUTSでは新卒中途問わず積極的に採用活動を行っています。
詳細はこちらをご確認ください。
https://www.donuts.ne.jp/recruit/

ジョブカン事業部のエンジニア募集はこちら。
https://recruit.jobcan.jp/donuts/show/B001/1396297