Chrome の DevTools>Sources>Snippets を backup/restore する

最近は PC 買い替えた際に新環境のブラウザ拡張やブックマークなんかはアカウント同期のおかげでやることほぼ無いし、Tampermonkey や Stylus の設定なんかもちょっと頑張った拡張ではそれぞれでクラウド同期やバックアップ/リストアの機能が用意されてる多いのであまり手間がかからなくて良いですね。

ですがそんな中、DevTools>Sources>Snippets に登録したスクリプト群に関してはアカウント同期の範疇外だし、それっぽい拡張も無いっぽい(そもそも出来るのか？）のでどうすっかなーと軽く調べてみたら何とかなったのでここに手順メモを記す。

DevTools の DevTools を開く

1. command + option + i で1段目のDevToolsを開く
2. 1段目のDevToolsを別ウィンドウ化する（DevToolsの右上の︙をクリック>Dock Side で 別ウィンドウ/左/下/右 が選べます）
3. 別ウィンドウ化されたDevTools内でもう一度 command + option + i すると2段めのDevToolsが開きます

2段目のDevTools内のコンソールでは InspectorFrontendHost というインターフェースが使えてこいつ経由でスニペット設定を取得/設定が出来るのだ。なお1段目のDevTools内では InspectorFrontendHost は not defined でした。2段目のコンソールのコンテクストでは他にも普段見かけないインターフェースがいろいろあるようなので暇な時に見てみると面白そうです。

スニペット設定の取得/更新方法

スニペットのバックアップとリストアの事前準備としてまずは前セクションに書いた手順で DevTools の DevTools を開いてそのコンソールでスタンバイしておきます。

おもむろに InspectorFrontendHost.getPreferences(p => console.log(p)) とかをコピペ実行してみるとコールバック内で p.scriptSnippets からスニペット一覧のJSON文字列が取得出来ることがわかります。
設定（リストア)するには逆に InspectorFrontendHost.setPreference("scriptSnippets", JSON文字列化したscriptsSnippetsの値) としてやることで丸ごと上書きな形でリストアが出来るようです。

さて旧PCから、新PCへスニペットを移植するだけならぱぱっとコピペで出来ると楽ちんなので、ミスも手間も省けるワンライナーを用意してみました。

バックアップ側で実行するコード

↓こんな感じです。

cp=copy;InspectorFrontendHost.getPreferences(p=>cp(`InspectorFrontendHost.setPreference("scriptSnippets",${JSON.stringify(p.scriptSnippets)})`))

これを実行すると『新PC側コンソールに貼り付け実行するだけでOKなワンライナーなコード』がクリップボードに入ってきます。ちなみにcopyはDevToolsのコンソール内で使える関数ですがコールバック内のコンテキストでは使えません。が、適当な参照変数にぶっこんでおけば良いだけなので特に困りません。

リストア側で実行するコード

ここに書くべきコードは特にありません。『バックアップ側で実行するコード』を実行すれば目的のリストア用コードは既にクリップボードに入っている筈なので、それをただリストア側コンソールに貼り付け実行すればOKです。
リストア実行したら1段目/2段目のDevToolsをともに一度閉じて、それから再度開けば DevTools>Sources>Snippets に旧PCのスクリプトが全てリストアされているはずです。

ところで今どきは同じAppleIDを設定したMacbook同士ならユニバーサルクリップボードによって片方でコピーした文字列が、即座にもう片方の端末で貼り付けられるので、今回のような作業なんかは朝楽ちんにできて良いですね。