はじめに
Webページに表示されているaタグにマーキングしたり属性を編集させることのできる拡張機能を作りました。
aタグにtarget="_blank"が付いているとセキュリティ的に危ないだとか、rel=”noopener noreferrer”を付けていると安全だとか言う話を前に聞いたので、いっそ自分でそれらを好きに変更出来たら面白いかなと思って軽い気持ちで作りました。
機能
基本的にポップアップウィンドウから操作をします。
aタグをマーキング
ポップアップの一番上のボタンでマーキングできます。
各aタグの持つ属性によって色分けします。
まずは、マーキング前のaタグ
普通のaタグ
target="_blank"付き
target="_blank"でrel=”noopener noreferrer”付き(noopener noreferrerのどちらか片方でも)
※target="_blank"無しでrel=”noopener noreferrer”のあるものには対応していません。
ちなみに、オプションページでマーキングの色を自分好みに変更できます。
blank="_target"を付与
ポップアップの上から二つ目のボタンで、Webページに表示されているすべてのaタグにtarget="_blank"を付けることができます。
rel=""の属性をオプションで選択して一緒に付けることができます。
blank="_target"を外す
上から三つ目で、Webページに表示されているすべてのaタグからtarget="_blank"を外すことができます。
※一番下のリセットボタンで、今までの操作をリロードしてリセットできます。
使用技術
Plasmo
まとめ
今まで作ったすべての拡張機能のポップアップなどのUIのデザインを使いまわしているので、次に作ることがあればさすがに変えようと思います。
activeTabやstorageを使った拡張機能はChrome Web Storeの審査に三日ほどかかるので、その間少しやきもきします(笑)。