🦔
【拡張機能】ウェブページ上のHTMLタグにボーダーを「Html-Tag-Border」【習作3】
はじめに
前回、前々回に引き続き拡張機能の習作を作りました。
今回は、Webページ上で指定したHTMLタグにボーダーを付ける物です。
cssなどでスタイリングするときにボーダーを付けてそのタグにどういう感じでスタイルが適用されるのかを確認することが多いので、その手間を省くために作りました。
ボーダーの色を指定できます。
よければ使ってみてください。
ついでに過去の習作もどうぞ
前回↓↓
前々回↓↓
拡張機能に追加する方法
- zipファイルをダウンロードして解凍する
- chrome://extensions/にアクセス
- デベロッパーモードにする
- パッケージ化されていない拡張機能を取り込むをクリック
- 解凍したフォルダを選択する
- すべての拡張機能の欄に「Tag border 0.0.1」追加されるので、右下のスイッチを青にして有効にする
- アドレスバーの右にあるパズルのピースのようなアイコンをクリックしてポップアップを出す
- 画鋲のようなアイコンをクリックして青(有効)にする
使い方
- アドレスバーの右側に追加されたアイコンをクリックしてポップアップを出す
- htmlタグを指定
- ボーダーの色を指定
- 指定したタグに指定した色のボーダーが付く
まとめ
今回はメッセージングという機能を使って、ポップアップとコンテンツスクリプトの間で値のやり取りをしました。
習作を通して拡張機能の様々な定石を一通り確認できたので、今後は本格的な拡張機能を作って行こうと思います。
plasmoはReact.jsを使える人なら簡単に拡張機能が作れるので、chromeで実現したいことがあれば簡単に実現することが出来て便利だと思います。
Discussion