👁️

開いているWEBページのmeta情報を確認するChrome拡張を作った

2022/04/19に公開約1,300字

成果物

※良かったら使ってみてください

https://chrome.google.com/webstore/detail/metacheckman/pbaikbiiaamibbojlnkonhhbbpofbgeh?hl=ja

ソースコード

https://github.com/underground0930/chrome_metaCheckMan

開発技術

React + Typescript + emotion

なんで作ったか

htmlのソースコードを開いてmeta情報を確認するのがナンセンスだから。
6年前に作ったもののアップデート版になります。

マニフェストのバージョンを近々 V2 → V3 にしないとダメらしく、
せっかくなので、使いやすくアップデートしました。

推しポイント

  • デザインを見やすくしました。
  • オプションページを追加して、表示させたいmetaデータを選択出来るようにしました。
  • 通常右上のアイコンを押した後、ページ移動やフォーカスアウトで消えてしまうポップアップを使いやすいように残す実装をしています。
  • リンクや画像のデータに別タブでリンクを貼っているので、クリックでリンク切れの確認もできます。

キャプチャ


参考にした記事

https://zenn.dev/januswel/articles/8118b18f3876cc
https://zenn.dev/katoaki/articles/4e7548b533d7b3
https://silver-birder.github.io/blog/contents/chrome_extension_development_feedback/

使用スターター

https://github.com/chibat/chrome-extension-typescript-starter

使用させていただいた素材アイコン

「ICOOON MONO」サイトのフリー素材を使わせていただきました。

https://icooon-mono.com/14307-眼球の無料アイコン1/

ストア漁ったら、人気の拡張みつけた。

デザインがいいのと、シェアデバッカーへのリンクついているのはCool!だと思いました。

https://chrome.google.com/webstore/detail/tdk-meta-checker/kjiieeppkcjgdigogiafneikdhpagpbc

Discussion

ログインするとコメントできます