myFacebookStyle の爆速化

myFacebookStyle をリニューアルしましたで「爆速化」って書きましたが、どうやってスピードを高めるかに苦心しました。

元々は、それぞれの定義で適用させる class と、適用させるスタイルを content_script 内の JS にそれぞれ書いておいて、実際に適用させる場面では、それらを組み合わせて style を body 内に記述する、という形式を採っていました。しかし Facecbook 側の度重なる仕様変更によって、適用させる class が膨大になってきており、その影響でスピードが落ちていたというのが原因でした。

これを改善すべく、以下の手法に変更しました。

1. 適用させる class を別途の css へ「/* BG background-color: $BG$;BG */」のように記述する
2. その css は外部ファイルとして manifest.json に定義する
3. 適用させる場面で、その css を JS で読み込む
4. BG を適用させる場合は、「/* BG」と「BG */」を外し、「$BG$」にユーザが定義した色指定を突っ込む
5. css を読み込むのは最初の一度だけで、変数に入れてデフォルトの内容を保持し、以降はそれを使い回す

これでかなり爆速化ができました。