Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

最近は 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内では InspectorFrontendHostnot 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同士ならユニバーサルクリップボードによって片方でコピーした文字列が、即座にもう片方の端末で貼り付けられるので、今回のような作業なんかは朝楽ちんにできて良いですね。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした