横スクロールが嫌でウェブページをウィンドウ幅に自動フィットさせるChrome拡張を作った

chromewebstore.google.com

作った動機

固定幅で設計された古いサイトや、横に長いページを閲覧するとき、毎回手動でズーム調整をするのが煩わしいと感じていました。ウィンドウ幅に合わせてページ全体を自動で収めてくれる仕組みがあれば、横スクロールに悩まされずに済むはずだと考え、シンプルな単一機能の拡張として自作することにしました。

コード解説

構成は最小限で、コンテンツスクリプトとポップアップ、設定保存の3要素です。

コアとなるのは倍率の計算部分です。ページの実コンテンツ幅を document.documentElement.scrollWidth で取得し、window.innerWidth との比率からズーム倍率を求めます。

function fitToWindow() {
  const contentWidth = document.documentElement.scrollWidth;
  const scale = window.innerWidth / contentWidth;
  document.body.style.zoom = Math.min(scale, 1);
}

window.addEventListener('resize', fitToWindow);
fitToWindow();

resize イベントにリスナーを登録することで、ウィンドウサイズが変わるたびに再計算し、常にフィットした状態を保ちます。オン/オフの設定は chrome.storage に保存し、次回以降も引き継げるようにしました。DOMの読み取りとスタイル適用のため、マニフェストではホスト権限を要求しています。

作って感じたメリット

自分の困りごとを直接解決できたのが一番の収穫です。拡張機能はブラウザAPIを少し理解すれば小さく作れるとわかり、「あったら便利」を自分の手で形にできる感覚が得られました。仕組みが単純なので保守もしやすく、必要に応じて機能を足していける拡張性も気に入っています。

chromewebstore.google.com