はじめに
Webページに表示されているaタグにマーキングしたり属性を編集させることのできる拡張機能を作りました。
aタグにtarget="_blank"が付いていると、新しいタブで開けて便利だけどセキュリティ的に危ないだとか、
rel=”noopener noreferrer”を付けていると安全だとか言う話を前に聞いたので、いっそ自分でそれらを好きに変更出来たら面白いかなと思って軽い気持ちで作りました。
こちらからどうぞ→Anchor-Editor
使い方
基本的にポップアップウィンドウから操作をします。
aタグをマーキング
- ポップアップの一番上のボタンでマーキングできます。
.webp)
- 各aタグの持つ属性によって色分けします。
まずは、マーキング前のaタグ
普通のaタグ
target="_blank"付き
target="_blank"でrel=”noopener noreferrer”付き(noopener noreferrerのどちらか片方でも)※target="_blank"無しでrel=”noopener noreferrer”のあるものには対応していません。
- ちなみに、オプションページでマーキングの色を自分好みに変更できます。
.webp)
blank="_target"を付与
- ポップアップの上から二つ目のボタンで、Webページに表示されているすべてのaタグにtarget="_blank"を付けることができます。
rel=""の属性をオプションで選択して一緒に付けることができます。.webp)
.webp)
blank="_target"を外す
- 上から三つ目で、Webページに表示されているすべてのaタグからtarget="_blank"を外すことができます。
.webp)
.webp)
※一番下のリセットボタンで、今までの操作をリロードしてリセットできます。
使用技術
Plasmo
今回は最初からGrokを使って開発したおかげか、以前の二つよりも速く完成しました。
実はネット上にPlasmoの情報は少なく、エラーを解消したり思い通りに動かしたいときにどうすればよいかわからなくなることが多々あるので、そんな状況でChatGPTやGrokといったAIはとても助けになります。
技術の進歩というものを肌で感じることが出来て少し興奮しました。
まとめ
今まで作ったすべての拡張機能のポップアップなどのUIのデザインを使いまわしているので、次に作ることがあればさすがに変えようと思います。
activeTabやstorageを使った拡張機能はChrome Web Storeの審査に三日ほどかかるので、その間少しやきもきします(笑)。
今回で制作したWebアプリ・拡張機能の紹介を一旦終わりにします。
次回作の制作に取り掛かる前に、息抜きとして制作当時のことを振り返りながらブログを書いています。
トータルで23個と結構記事数が多くなってしまったので、一度まとめてみようと思います。
投稿
