PerfectPixel by WellDoneCode (pixel perfect)

https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ja

ブラウザ上に透過した画像（デザインカンプ）を重ねることができます。デザインカンプの再現をするのに、とても重宝している拡張機能になります。

16進カラーピッカー

https://chrome.google.com/webstore/detail/hex-color-picker/eamkimleiebmdpifljjfilhbaehclahg?hl=ja

スポイトでブラウザ上の色を読み取り、カラーコードを教えてくれる拡張機能です。知りたい色があるときは、これを使うと便利です。
とくに、検証ツールでもカラーコードを拾えない、イラストなどの画像からもスポイトできるため、サイト内の色統一に使えます。

素晴らしいスクリーンショットとスクリーンレコーダー

https://chrome.google.com/webstore/detail/awesome-screenshot-and-sc/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ja

スクリーンショットをする拡張機能です。「表示部分」、「フルページ」、「選択範囲」の3種類から選んで、スクリーンショットができます。
参考にしたいデザインを撮るのによく使っています。

GoFullPage - Full Page Screen Capture

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

こちらもスクリーンショットする拡張機能ですが、上記の拡張機能と違い、ワンクリックでフルページを撮ることができます。

Check My Links

https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf?hl=ja-JP

ページ内のリンク切れをワンクリックでチェックすることができる拡張機能です。
4色に色分けしてリンクできているか確認ができるため、コーディングの最後に、確認する時などに便利です。

まとめ

いかがでしたでしょうか。
googleの拡張機能は色々な種類のものがあるので、色々試してみると楽しいと思います。
個人的に、「PerfectPixel」はコーディングに必須となっています。余白をいちいちillustratorで図らなくてもいいのは大きいです。
最後までお読みいただき、ありがとうございました。