はじめに
以前作ったWebアプリの拡張機能版を作りました。
相違点はカテゴリ分けが出来なくなった代わりにお気に入り機能を使えるようになった点です。
↓から拡張機能に追加してください。
コンテキストメニュー(右クリックしたら出てくるやつ)でwebページ上の入力フォームにあらかじめストックしておいたテキストを貼りつけることができます。
頻繁に使う定型文などをタイピング無しでペーストできるという機能はそのままに、よりブラウザでの使用に特化した仕様にしました。
使い方
この拡張機能ではサイドパネルを使えるので、それが開かれた状態をデフォルトとして説明します。
まずWebページ上のテキストの好きな箇所をドラッグし
右クリックしてコンテキストメニューを開き
ドラッグしたワードを追加を選択し、お気に入りに追加 or 普通に追加 を選ぶと...
ストックに追加されます。
ストックしたテキストは入力フォーム上でコンテキストメニューからペーストすることができます。
その際は入力フォームにカーソルを合わせて右クリックしてワード貼り付けを選択してください。お気に入りに登録してあるもの or そうでないもの から選んでペーストすることになります。
サイドパネルでストックしたワードの管理ができます。
お気に入り状態のものは黄色く表示されます。
また、ストックはポップアップやサイドパネルから手動で追加することもできます。
使用した技術
Plasmo
React.jsベースで拡張機能を作れる便利なライブラリです。
TypeScriptとlocalStorageも使用しました。
localStorageは@plasmohq/storageを使うとだいぶ楽に管理できるので、至れり尽くせりでした。
最も苦労したのが入力フォームへのペースト機能の実装で、バックグラウンドとメッセージングという拡張機能特有の技術に四苦八苦し、Grokに助けてもらいながらどうにか完成に至りました。
まとめ
Chromeウェブストアに出す拡張機能を作ろうと、習作を作ったりして年が明けてから取り組んで来ましたが、
寒暖差アレルギーで体調を崩しながらやっていたのでかなり時間がかかってしまいました。
ちなみに本作を完成させてウェブストアに申請した後コロナに感染して、
療養しながらこの駄文を書いています。
不幸中の幸いか、申請が三日ほどで終わってくれてホッとしました。
それと、ウェブストアに申請する際にプライバシーポリシーなどの設定が結構大変した。
別個でプライバシーポリシーのwebページを作る必要があったので一気にやる気がなくなりかけましたが、
htmlとcssのテンプレが沢山有ったので作成には時間がかかりませんでした。プライバシーポリシーの内容はGrokに助けられながら頑張って作りました。
Plasmoや拡張機能は情報が多くなかったので、今回はかなりAIに力を借りました。
コロナが治ったら、次回作も作って行きたいです。