Chrome拡張機能おすすめ15選！Web開発・プログラミングするなら必須

ニュース

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

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

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

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

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

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

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

おすすめのGoogle Chrome拡張機能①pushbullet

 

 

パソコンで見ているページを簡単にスマホで見られる機能

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

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

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

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

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

おすすめのGoogle Chrome拡張機能②Awesome Screenshot: キャプチャーと注釈

 

 

簡単にスクショを保存・共有できる機能

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

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

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

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

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

おすすめのGoogle Chrome拡張機能③ Image Downloader

 

 

見ているページの画像を一括でダウンロードできる機能

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

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

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

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

おすすめのGoogle Chrome拡張機能④ Clear Cache

 

 

ワンクリックでキャッシュを削除できる機能

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

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

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

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

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

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

おすすめのGoogle Chrome拡張機能⑤ Linkclump

 

 

カーソルで指定した範囲のページを一括で開ける機能

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

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

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

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

おすすめのGoogle Chrome拡張機能⑥ Web Maker

 

 

ブラウザでエディタを表示できる機能

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

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

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

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

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

おすすめのGoogle Chrome拡張機能⑦ CSSViewer

 

 

カーソルに合わせた部分のCSSを確認できる機能

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

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

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

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

おすすめのGoogle Chrome拡張機能⑧ Tab Resize – split screen layouts

 

 

簡単に画面を分割出来る機能

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

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

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

おすすめのGoogle Chrome拡張機能⑨ WhatRuns

 

 

サイト上のプラグインやフレームワークを確認できる機能

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

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

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

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

おすすめのGoogle Chrome拡張機能⑩ Page Analytics (by Google)

 

 

Webページのどの部分が一番見られているのかを確認できる機能

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

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

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

おすすめのGoogle Chrome拡張機能⑪ ColorPick Eyedropper

 

 

サイト上で使われているカラーコードとRGBを取得できる機能

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

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

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

おすすめのGoogle Chrome拡張機能⑫ Go Back With Backspace

 

 

Backspaceボタンのような機能

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

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

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

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

おすすめのGoogle Chrome拡張機能⑬ ato-ichinen

 

 

Googleの検索結果を1年以内に絞ることができる機能

こちらのChrome機能はGoogleの検索結果を1年以内に絞ることができるので、デザインやプログラミング言語について最新の情報を知ることができます。

技術の進歩や移り変わりが激しいIT業界で働いているのであれば必須のChrome拡張機能です。

ダウンロードはこちらから⬇️
https://chrome.google.com/webstore/detail/ato-ichinen/pojaolkbbklmcifckclknpolncdmbaph

おすすめのGoogle Chrome拡張機能⑭ Wappalyzer

 

 

開いているサイトの言語やフレームワークを知れる機能

サイトで使われている言語やフレームワークが知りたいときに便利なのがこちらのChrome拡張機能です。

プログラミング、Web開発初心者にとっては特に参考になると思うので、ぜひ使ってみてください！

ダウンロードはこちらから⬇️
https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=ja

おすすめのGoogle Chrome拡張機能⑮ One Tab

 

 

開いているタブを1つにまとめる機能

多数のタブを開いているとChromeが重くなります。そんな時に使いたいのがOne Tab。

こちらは開いているタブを1つにまとめることができます。復元をするを元に戻すこともできるのでとても便利です！

ダウンロードはこちらから⬇️
https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall

最後に

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

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

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

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

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