ブラウザを重くしない、かわいい Chrome 拡張機能

飾りのためのブラウザ拡張機能には評判があり、その多くは自業自得です。重く、よくしゃべり、誰も読まなかった権限の一覧つきで入れられる。もったいない話です。この分野は本当に楽しく、しかも挙げた問題はどれも避けられるのですから。

確かめておきたい三つのこと

• 権限の一覧。Chrome がインストール前に見せてくれます。storage は設定ファイルです。tabs、cookies、history、webRequest は、閲覧内容をのぞける類の権限です。
• ページのレイアウトに触るかどうか。要素を文書の流れに挿し込む拡張機能や、スクロールごとに要素の位置を測る拡張機能は、描く量がどれほど少なくても、滑らかなページをぎこちなくできます。
• どこへ要求を送るか。ネットワークタブがにぎやかな飾りは、聞かされていない二つ目の仕事をしています。

レイアウトがいちばん痛いのはなぜか

レイアウトの値を読むこと — 要素の高さ、画面上の位置 — は、答えを返す前に保留中のレイアウト計算をすべて終わらせることをブラウザに強います。それをスクロールの処理の中でやれば、描きかけのページの上で、毎秒六十回止まって測れと頼んだことになります。

「この拡張機能を入れるとスクロールがカクつく」という苦情のほとんどは、この仕組みが原因です。そして誰かが計測するまで見えません。直し方は地味です。スクロール中はレイアウトを読まない。書くのは transform だけ。動かすのはコンポジタに任せる。

ここではどうなっているか

scrolldog は、どのページでも端に沿ってスクロールの速さで走る小さなドット絵のペットです。同時に、上の確認事項をひととおり通した実例でもあります。共に暮らせるものにするには、通す必要がありました。

• 権限は二つ、storage と unlimitedStorage。tabs も cookies も history も webRequest もありません。
• ホスト権限は api.scroll.dog の一つだけ。ライセンスの確認に使い、開いているページに触るために使うことはありません。
• ペットは大きさゼロの固定レーンに住み、書くのは CSS の transform だけなので、ページ自身のレイアウトは変わりません。
• スクロールは passive で聞き、アニメーションの1フレームにつき1回の書き込みにまとめます。
• スイッチ一つで、開いているすべてのタブから即座に消えます。

どれも自慢ではありません。最低限です。見ていて心地よいことが仕事のすべてであるものに、何かを遅くする資格はありません。