【これさえあれば完璧!】作業を圧倒的に効率化してくれるChrome拡張機能12選

ニュース

公開日 : 2020年01月09日 | [更新日] 2020年01月09日

「たった一つの拡張機能でこんなに変わるなんて」

今回紹介する拡張機能を使ってみた私の感想です。

ありきたりな感想ですが、1周まわってこんなありきたりな感想になってしまうのです。

便利な拡張機能を知ってしまった今、開発や勉強、その他細々とした作業が楽しみになってます。

あなたの時間は有限です。

これから紹介する拡張機能を使って、効率化をはかりましょう！

1. pushbullet

パソコンで見ているページをスマホで見たい時ってありませんか。

例えば、住所をパソコンで調べていて、移動する時になってスマホで情報がみたくなったとき。

新しく公開したページをスマホ画面で確認したいときなど。

そんなときにこの拡張機能を使えば、アイコンを押すだけで、登録しているスマホやタブレットにプッシュ通知を送ることができます。

ダウンロードはこちらから
https://chrome.google.com/webstore/detail/pushbullet/chlffgpmiacpedhhbkiomidkjlcfhogd

2. Awesome Screenshot: キャプチャーと注釈

ブラウザ上で表示している画面をスクリンーンショット撮りたい時ありませんか。

誰かに共有したいとき、証拠として情報を保存しておきたいときなど。

そんなときにこの拡張機能が大活躍します。

自分のPC内に保存することもできれば、スクリーンショットしたものをワンクリックで共有することもできます。

ダウンロードはこちらから
https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ja

3. Image Downloader

この拡張機能を使えば、閲覧しているページに掲載されている画像をすべてダウンロードすることができます。

サイズでも絞り込みをかけることができるため、「小さいサイズの画像だけ欲しい」、「大きいサイズの画像だけ欲しい」といった要望も解決。

ダウンロードしたい画像のみ選択して、ダウンロードすることができるのが特徴。

ダウンロードはこちらから
https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj

4. Clear Cache

新しい機能を搭載したときや、CSSで見た目のデザインを変えたときなど。

実際にウェブ上の画面をみてみると、「あれ、確かに実装したのに変わってない…」みたいなことってありませんか。

多くの場合、キャッシュが残っているせいで変わってないことがほとんどです。

キャッシュを消そうにも、履歴にいって…とめんどくさい。

この拡張機能を使えば、ワンクリックでキャッシュを削除できるので、大幅に時間を削減することができます。

ダウンロードはこちらから
https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn

5. Linkclump

カーソルで指定した範囲のページを一気に開いてくれるのがLinkclump。

開発したウェブサービスのページリンクを正しく設定できているか確認するときや、検索結果に表示された記事をすべて表示したいときなど。

とにかく一気にリンクを開きたい時に活用することができます。

ダウンロードはこちらから
https://chrome.google.com/webstore/detail/linkclump/lfpjkncokllnfokkgpkobnkbkmelfefj

6. Web Maker

通常のブラウザ上でエディタを機能を表示してくれる拡張機能。

アイコンをクリックしたあとに新規タブを開くとそのタブがエディタになります。

調べ物をしていて、さくっとコードを書いて試したいときにおすすめ。

書いたコードがどのように反映されるのかを右側に表示してくれるのでまさにさくっと確認したい時に便利な拡張機能です。

ダウンロードはこちらから
https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh

7. CSSViewer

CSSViewerは特にフロントエンドエンジニアにおすすめの拡張機能。

気になる部分にカーソルを合わせるだけで、そこにどのようなCSSが組まれているのか確認することができます。

カラーコードを確認したいときや、マージン、パディング幅を確認したいときなどに重宝する拡張機能です。

ダウンロードはこちらから
https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce

8. Tab Resize – split screen layouts

この拡張機能では、簡単に画面を分割することができます。

２分割にして、一つの画面を参考にしながら作業を進めたい時や、大きなモニター上で複数画面を見せながら情報共有をしたいときなど様々なシーンに
合わせて画面を分割することができます。

ダウンロードはこちらから
https://chrome.google.com/webstore/detail/tab-resize-split-screen-l/bkpenclhmiealbebdopglffmfdiilejc

9. WhatRuns

この拡張機能を使えば、そのサイト上でどのようなツールやプラグイン、フレームワーク、開発環境が使われているのかを確認することができます。

サイト上で気になる機能があったときに、「どのようにこれを実現しているんだろう？」と思ったことはありませんか。

そんな時にWhatsRunsを使えば一瞬でわかります。

ダウンロードはこちらから
https://chrome.google.com/webstore/detail/whatruns/cmkdbmfndkfgebldhnkbfhlneefdaaip

10. Page Analytics (by Google)

Webページ上でどの部分が一番見られているのかを視覚的に確認することができます。

Web上でどのボタンがよくクリックされているのかといったことを検証したい時に、「意外とこっちのボタンの方が押下されている」などの
インサイトを簡単にチェックすることができます。

ダウンロードはこちらから
https://chrome.google.com/webstore/detail/page-analytics-by-google/fnbdnhhicmebfgdgglcdacdapkcihcoh

11. ColorPick Eyedropper

Web上で気になる色があるときに、そこにカーソルを合わせることで、色コードとRGBの両方を簡単に取得することができます。

フロント側で実装する時は色コードもしくは、RGBで指定しないといけないので、特にフロントエンドエンジニアの方は重宝する拡張機能です。

ダウンロードはこちらから
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

12. Go Back With Backspace

かつては標準搭載されていた機能であるBackspaceボタンでの戻る機能。

Backspaceで戻ることに慣れていた人はこの拡張機能で実現することができます。

Backspaceであれば、大きく指を動かす必要もないので、必要最低限の動作で前のページに戻ることができるようになります。

ダウンロードはこちらから
https://chrome.google.com/webstore/detail/go-back-with-backspace/eekailopagacbcdloonjhbiecobagjci?hl=ja

最後に

いかがでしたでしょうか。

ちょっとした作業を効率化してくれる拡張機能を紹介しました。

塵も積もれば山となるといいますが、オンライン上で使っている時間は可視化されづらいこともあり、チリが積もっていることに気づかない場合が多いです。

今回紹介した拡張機能を使うことによって、数秒、数分だけかもしれませんが、年間で見れば、数十時間、数百時間の効率化につながっているかもしれません。

まだまだ他にも便利な拡張機能があると思うので、もし今みなさんが使っている拡張機能でおすすめのものがあれば、教えていただけると嬉しいです。