👁️
開いているWEBページのmeta情報を確認するChrome拡張を作った
成果物
※良かったら使ってみてください
ソースコード
開発技術
React + Typescript + emotion
なんで作ったか
htmlのソースコードを開いてmeta情報を確認するのがナンセンスだから。
６年前に作ったもののアップデート版になります。
マニフェストのバージョンを近々 V2 → V3 にしないとダメらしく、
せっかくなので、使いやすくアップデートしました。
推しポイント
- デザインを見やすくしました。
- オプションページを追加して、表示させたいmetaデータを選択出来るようにしました。
- 通常右上のアイコンを押した後、ページ移動やフォーカスアウトで消えてしまうポップアップを使いやすいように残す実装をしています。
- リンクや画像のデータに別タブでリンクを貼っているので、クリックでリンク切れの確認もできます。
キャプチャ
参考にした記事
使用スターター
使用させていただいた素材アイコン
「ICOOON MONO」サイトのフリー素材を使わせていただきました。
ストア漁ったら、人気の拡張みつけた。
デザインがいいのと、シェアデバッカーへのリンクついているのはCool!だと思いました。
Discussion