Chrome 拡張機能「JSON-YAML Toggle」を作った

f:id:jinjor:20170722154842p:plain

JSON と YAML をページ上で切り替えるツール。最近 AWS を触っていて、設定ファイルを JSON でも YAML でも書けるんだけどサンプルがどっちか片方しかなく、コピペに不便だった。

使い方は、コンテテクストメニューで「Toggle JSON/YAML」を選ぶだけ。

f:id:jinjor:20170722154953g:plain

ソースはこちら。

「右クリックしたら画面を操作する」Chrome 拡張を作る場合、上のリポジトリを参考にすると楽。

パッケージとして公開にするには ZIP 化が必要なので、package/ をそのフォルダにする。
manifest.json に必要事項を書く。必要なファイルとか実行条件とか。
context menu 登録用の background.js と、各ページで動作する content-script.js を用意。右クリックされたら前者から後者にメッセージが送られる。DOM は後者からのみ操作できる。
アイコン用画像を３種類ほど用意する。
package を zip 化して Chrome ストアにアップロードして、概要など必要事項を入力する。宣伝用の画像とスクリーンショットが追加で必要。確定すると数分後に公開される。

今回は webpack で js-yaml モジュールと一緒にバンドルしたが、リンクで読み込むのでもいけるような気がしないでもない。