便利なGoogleChromeの拡張機能まとめ 〜web制作者向け〜

web制作者向けの便利なGoogleChromeの拡張機能を中心に紹介します。

サイト閲覧時に使える拡張機能

ページ上部に戻るボタンを全てのサイトで - Scroll To Top

https://chrome.google.com/webstore/detail/scroll-to-top/hegiignepmecppikdlbohnnbfjdoaghj

トップに戻るボタンをどんなサイトでも表示してくれます。また、設定を変更すればボタンの位置や、ページ下部に戻るボタンを追加したりなど、意外と細かくカスタマイズすることが出来ます。

検索結果を1クリックで1年以内の記事のみに

-

ato-ichinen

https://chrome.google.com/webstore/detail/ato-ichinen/pojaolkbbklmcifckclknpolncdmbaph

Googleの検索結果一覧のページで、手軽に1年以内の記事のみを表示させることが出来ます。記事の絞り込みの機能はもともとGoogleChromeの機能に備わっていますが、それをワンクリックで実行してくれる便利な拡張機能です。

検索結果にサイトのサムネイルを追加 -

SearchPreview

https://chrome.google.com/webstore/detail/searchpreview/hcjdanpjacpeeppdjkppebobilhaglfo

Googleの検索結果一覧にサイトのサムネイルが表示されるようになります。

web製作時に使える拡張機能

シンプルなスポイトツール

-

ColorPick Eyedropper

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

サイト上の色のカラーコードを簡単にコピー出来るスポイトツールです。スポイトツールの拡張機能は何個かありますが、これは反応が早くて必要最低限の機能しかないのでとても使いやすいです。

開いているタブのURLを一括コピー

-

Copy All Urls

https://chrome.google.com/webstore/detail/copy-all-urls/djdmadneanknadilpjiknlnanaolmbfk

URL関係の２つの機能があります。

• 開いているタブ全てのURLをコピー
• クリップボードにコピーされているURLを全て開く

複数のURLをコピーしたり、一気に開きたい時にとても重宝する拡張機能です。

マークダウンファイルをプレビュー

-

Markdown Preview Plus

https://chrome.google.com/webstore/detail/markdown-preview-plus/febilkbfcbhebfnokafefeacimjdckgl

マークダウン形式のファイルをブラウザ上で開いたら、スタイルが適用された状態で表示してくれます。

 

コーディング時にデザインと差分が無いかをチェック

-

PerfectPixel by WellDoneCode

https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

コーディング時に、デザインカンプと差分が無いかをチェックする時に便利な拡張機能です。サイト上に画像を表示させ、位置や透明度を自由に変えることが出来ます。

QRコードを生成

-

The QR Code Extension

https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb

開いているサイトのQRコードを表示させてくれます。スマホでサイトを確認したいときに便利な拡張機能です。

その他

開いているタブを一元管理

-

OneTab

https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall

複数のタブを開き過ぎたりして動作が重くなった時に使える拡張機能です。

開いているタブを一気に閉じてブックマークのような形でひとつの専用ページにまとめてくれます。まとめられた後は、ページを個別で開くことも出来るし、まとめられたページ全てを一気に開くことも出来ます。

普段使うサイトにjsを適用

-

ScriptAutoRunner

https://chrome.google.com/webstore/detail/scriptautorunner/gpgjofmpmjjopcogjgdldidobhmjmdbm

任意のサイトにのみJavaScriptを自動で実行させる拡張機能です。普段使うサイトでちょっとした機能を追加したい時や、ライブラリを追加したい時などに使えます。

まとめ

今回はweb製作者向けに紹介した拡張機能ですが、やはり人によっては使いやすい、使いにくいはあると思います。機能が似ている拡張機能はいくつもあるので、この記事を参考に自分にあった拡張機能を探してみてはいかがでしょうか。