タビアンのエンジニアがオススメするGoogle Chrome拡張機能12選！

こんにちは、タビアンのエンジニア梁瀨（やなせ）です。

前職は営業で、2022年5月にタビアンに未経験でエンジニアとして入社しました。主にNuxtとAWS Amplifyでアプリ開発をしています。好きなChromeの拡張機能はLocator.jsです。

今回は、タビアンのエンジニアが実際に使っていておすすめのGoogle Chrome拡張機能を紹介します。

拡張機能を上手く使うだけで作業効率を何倍も上げられる可能性があるので使ってみてください。

それでは紹介していきます。

1.FireShot

ウェブページ全体をスクリーンショット - FireShot

ウェブページ全体をスクリーンショット撮影。PDF/JPEG/GIF/PNGでキャプチャ、編集、保存やアップロード、印刷、そしてOneNote、クリップボード、メールに送信できます。

https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja

こちらは手軽にスクリーンショットを撮影できる拡張機能です。
スクリーンショットする範囲を選択するだけで簡単に撮影ができます。
PDF保存はもちろん、保存が必要ない場合は「クリップボード」にコピーして一時的にコピペすることも可能です。PC標準でもスクリーンショット機能はありますがこちらの方が使い勝手が良いと思います。

2.GoFullPage

GoFullPage - Full Page Screen Capture

余分な権限を要求することなく、現在のページのスクリーンショットを完全に確実にキャプチャできます。

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

こちらは1で紹介したFireShotと同様、スクショ撮影ができる拡張機能です。FireShotとの違いは常にページ全体の撮影を行うことです。範囲選択など煩わしいという方はこちらを使ってみては？

3.Tampermonkey

Tampermonkey

The world's most popular userscript manager

https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=ja

ページにJavaScriptを仕込んで自由にカスタマイズ可能。ページの振る舞いを変えたいなという時に便利です。

4.Stylus

Stylus

Stylus でウェブのデザインを変更しましょう。これは、ユーザースタイルを管理するツールです。Stylus を利用すると、多くの人気サイト向けのテーマやスキンを簡単にインストールできます。

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja

Google ChromeにカスタマイズされたCSSスタイルシートを適用できる拡張機能です。これにより、Webページの見た目を変更することができます。
3のTampermonkeyと似ていますが、TampermonkeyはWebページの振る舞いを変更するための拡張機能であり、StylusはWebページの見た目を変更するための拡張機能です。

5.Black Menu for Google™

Black Menu for Google™

"Black Menu for Google を使えば、今いるページから離れることなく、Google 検索、Google+、Google 翻訳など、お気に入りの Google サービスにドロップダウンメニューから簡単にアクセスできるできるようになります。メニューアイテムをクリックすれば小さなウィンドウでプレビューが見られ、メニュー右のボタンをクリックすれば、新しいタブで開くこともできます。 ...

https://chrome.google.com/webstore/detail/black-menu-for-google/eignhdfgaldabilaaegmdfbajngjmoke?hl=ja

Googleが提供するサービス（Gmail、Googleカレンダーなど）に簡単にアクセスできます。
いちいち検索したり、ブックマークしなくても良いので楽ですよ。

6.JSON Viewer

JSON Viewer

The most beautiful and customizable JSON/JSONP highlighter that your eyes have ever seen. Open source at https://goo.gl/fmphc7

https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ja

JSON フォーマットのデータを視覚的に整理できます。これはデバッガーや開発者にとって非常に有用です。
【フォーマット前】

【フォーマット後】

7.Vue.js devtools

Vue.js devtools

Browser DevTools extension for debugging Vue.js applications.

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja

Vue.js アプリケーションをデバッグするのに最適な拡張機能です。
アプリケーションの状態、コンポーネントのトラブルシューティングなどを行うことができます。

タビアンではVueをメイン技術としているので必須ですね。

8.Wappalyzer

Wappalyzer - Technology profiler

Identify web technologies

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

サイト上で使用されている技術を簡単に確認することができます。WordPress から Magento まで、サイト上で使用されている技術についての情報を入手することができます。
「このサイトどうやって作っているんだろう？」と気になったら調べて参考にしてみてください。

9.LocatorJS

LocatorJS

LocatorJS Chrome Extension - option-click to code (ReactJS)

https://chrome.google.com/webstore/detail/locatorjs/npbfdllefekhdplbkdigpncggmojpefi

個人的に超おすすめの拡張機能です。JavaScript コードを探すのに最適なツールです。
例えば「Reactでできている画面でこの部分のコードを確認したい」と思うことはありませんか？
Locator.jsを使うとoption（windowsの場合はAlt）を押しながら気になる箇所をクリックするとそのコードが書いてある部分に飛びます。いちいちコードが書いてある部分を探さなくて良いのでとっても楽です。

10.Vimium

Vimium

The Hacker's Browser. Vimium provides keyboard shortcuts for navigation and control in the spirit of Vim.

https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb?hl=ja

エンジニア界隈ではマウスを使わずにPCを操作するのがスマートみたいな風潮はありませんか？
ただそうなるとどうしてもタッチパッドで操作しなくてはならず、ホームポジションが崩れるのが嫌という方もいるでしょう。

そんな人におすすめなのがこの拡張機能です。
Vimiumを使えばChrome をキーボードのみで操作できます。タブの切り替え、検索、リンクのクリックなど、手を使わずにブラウジングすることができるのでスマートな雰囲気を出せます。Fキーを押すとキャプチャのように各リンクにキーが振られるのでそのキーを押すだけでアクセスできます。

11.DeepL

DeepL翻訳：読みながら、書きながら使える翻訳ツール

世界最高レベルの精度を誇るDeepL翻訳で、テキストを読みながら、または書きながら訳せます。

https://chrome.google.com/webstore/detail/deepl-translate-reading-w/cofdbpoegempjloogbagkncekinflcnj?hl=ja

これは使っている人が多いのではないでしょうか？
エンジニアになるまでは翻訳ツールといえばGoogle翻訳と思っていましたが精度が段違いです。正直もっと早く知りたかったです。
気になる部分を選択するとアイコンが表示されるのでクリックすると翻訳された文が出てきます。
とても分かりやすい日本語で表示されるので英語が苦手な人にとっては救世主ですね。

12.Authenticator

Authenticator

Authenticator はお使いのブラウザーで2段階認証コードを生成します。

https://chrome.google.com/webstore/detail/authenticator/bhghoamapcdpbohphigoooaddinpkbai?hl=ja

Authenticatorは、2要素認証システムを管理するためのGoogle Chrome拡張機能です。
これにより、認証コードを手軽に発行することができます。
タビアンではVue.jsと同様にAWSサービスをメイン技術として使っていますがIAMユーザーでのログインでMFA認証する際によく使います。