⭐
ウェブ制作者向け便利なChrome拡張機能まとめ
ウェブ制作に関わるエンジニアだけでなく、ディレクターやデザイナーにも便利に使えるChrome拡張機能をまとめました。
アプリのほうが使いやすい拡張機能は省いています。
拡張機能の提供先が安全かを保証するものではありません。参考情報として使用し、ご自身の判断で追加してください。
検索
Quick Custom GSearch
- 検索対象期間や言語をすぐに絞り込めます
- ブラウザ幅が1285px以下になるとコンテンツ部分と被るので注意が必要です
外部サービス連携
Zoom Chrome Extension
- Googleカレンダー編集画面でZoomの登録ができます
タブ管理
OneTab
- 開いているタブをグループとして一覧化、グループ単位で復元可能です
- 一覧の中のリンクはドラッグで入れ替えできます
- 固定しているタブは対象外です
- 標準のタブグループと違い、PCを再起動しても削除されません
Tabbs
- Command + Jで起動して開いているタブを検索できます
- 閲覧履歴も併せて絞りこまれます
画像の保存
画像を JPG/PNG/WebP として保存
- 指定したフォーマットで画像をダウンロードできます
- Chromeでは自動的にWebPでダウンロードされてしまうことがあります
Image Downloader
- ページ内の画像を一覧化、複数選択してダウンロードできます
- 画像の幅や高さなどでフィルタリング可能です
コンテンツチェック
SEO META in 1 CLICK
- メタタグや見出しなどを一覧で表示できます
- OGPや構造化データのチェックツールへワンクリックで移動できます
Alt & Meta viewer
- メタタグを一覧で確認できます
- ページ上にポップアップが表示され、altテキストや画像サイズを確認できます
Check My Links
- ページ内のリンク先に遷移できるかを検証できます
※年齢の証明が必要になっていた
Clear Cache
- クッキーやローカルストレージなど項目ごとにキャッシュを削除できます
表示のカスタマイズ
G-calize
- Googleカレンダーの「今日」「土日」「祝日」などに背景色を設定できます
Stylus (beta)
- ドメインやページごとに独自CSSを指定できます
リンク作成
Create Link
- 設定しておいた形式で、そのページのタイトルやURLなどをコピーできます
- 例
- HTML：
<a href="%url%">%htmlEscapedText%</a> - Markdown：
\\[%text_md%\\](%url%)
- HTML：
デザイナー向け検証ツール
WhatFont
- 実際に適用されているフォントが確認できます
CSSViewer
- 要素にホバーするとCSS一覧がポップアップで表示されます
- Fでポップアップを固定してコピー可能です
Pesticide for Chrome
- ページ上にある要素をアウトライン化してレイアウトを視覚化できます
VisBug
- ブラウザ上から様々な検証や編集ができます
- 余白の確認や要素の配置変更
- コントラスト比やaltの確認
- フォントスタイルやテキストの編集
技術ツール検証
Wappalyzer - Technology profiler
- そのページでどんな技術やツールを使っているのかを確認できます
教えてURL
- そのページでどんな技術やツールを使っているのかを確認できます
開発：品質管理
Lighthouse
- デベロッパーツールを開かずにLighthouseを実行できます
HTMLエラーチェッカー
- HTMLの開始・終了タグが正しいかを検証できます
retire.js
- 脆弱性のあるJSライブラリがないか確認できます
Google Maps Platform API Checker
- Google Maps Platform APIsの実装が適切かを確認できます
Accessibility Insights for Web
- 見出しレベルやランドマークを可視化できます
- タブで移動した順番を可視化できます
- グレースケールで表示できます
Alix for Chrome
- CSSセレクターを使ったアクセシビリティ検証ができます
DevTools z-index
- デベロッパーツールのElementsパネルに「z-index」ペインを作成して、ページ内のz-indexを一覧化できます
PerfectPixel by WellDoneCode (pixel perfect)
- ブラウザと画像を重ねてデザイン通りかを確認できます
Web Developer
- 「〜を表示」「〜を無効」「〜を削除」などいろいろな機能が使えます
開発：その他
テキストエンコーディング
- ブラウザから開いたファイルのエンコーディングを指定できます
- 文字化けしたときにUnicode8（UTF-8）に切り替えると文字化けが直ります
JSON Formatter
- ブラウザ上でJSONファイルを開いたときにハイライトや折りたたみ機能を追加します
- ローカルファイルも対象にしたい場合は設定から「ファイルの URL へのアクセスを許可する」をオンにする必要があります
Tampermonkey
- スクリプトを登録してブラウザから実行できます
- Userscript.Zone Searchというサイトでスクリプトを検索できます
Discussion