chromewebstore.google.com
WEBサイトを見ているとき、「この画像の一部、もう少し拡大して見たいな…」「ページの縮小・拡大（Zoom）だとレイアウトが崩れて見づらいな…」と思うことってありませんか？
既存のブラウザ拡張機能を探してみても、多機能すぎて重かったり、操作感がイメージと違ったり……。
「それなら自分で、シンプルかつサクッと動くやつを作っちゃえばいいのでは？」と思い立ち、Google Chromeの自作拡張機能（拡大鏡アプリ）を開発してみました！
このウェブサイトには実は拡大鏡機能をつけているのですが、Yahooや一般的な外部のサイトでは画像や文字の虫眼鏡はでてきません。
今回は、どのような仕組みで作ったのか、コードの要点やこだわりについて書いてみたいと思います。
どんな拡張機能？（主な機能）
今回作成したのは、マウスカーソルをあてた部分を虫眼鏡のようにリアルタイムで拡大表示するシンプルな拡張機能です。
ホバー拡大: マウスの動きに追従して、カーソル直下の領域をルーペ状に拡大。
引き算のデザイン: 余計な広告や不要な権限は一切なし。画面の邪魔をしないシンプルなUI。
開発のポイント：Manifest V3と画面描画
Chrome拡張機能の最新規格であるManifest V3に対応させています。主な構成ファイルと処理のロジックは以下の通りです。
1. manifest.json の設定
画面上のコンテンツ（DOM）に対して直接操作を行うため、content_scripts を中心に構成します。
{
"manifest_version": 3,
"name": "Simple Magnifier / 拡大鏡",
"version": "1.0.0",
"description": "カーソル位置をリアルタイムに拡大表示するシンプルな拡大鏡ツール",
"permissions": [
"activeTab",
"storage"
],
"action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["content.css"],
"js": ["content.js"]
}
]
}
2. マウス追従と拡大処理（content.js のコアロジック）
拡大鏡の実現方法にはいくつかのアプローチがありますが、今回はパフォーマンス重視で「Canvasを使用した画像・要素のクロップ＆スケール」または「CSSの transform と clip-path を組み合わせた要素のミラーリング」を採用しました。
以下は、CSSとJavaScriptでマウスカーソル位置にレンズを表示させる基本的な処理のイメージです。
// レンズ要素の生成
const lens = document.createElement('div');
lens.id = 'chrome-magnifier-lens';
document.body.appendChild(lens);
// マウス移動イベントのハンドリング
document.addEventListener('mousemove', (e) => {
if (!isMagnifierActive) return;
const mouseX = e.clientX;
const mouseY = e.clientY;
// レンズの位置をカーソルに追従させる
lens.style.left = `${mouseX - lensOffset}px`;
lens.style.top = `${mouseY - lensOffset}px`;
// レンズ内部の背景画像位置（またはTransform）を調整して拡大効果を作る
updateMagnifiedView(mouseX, mouseY);
});Webページ全体のレイアウトを崩さずに「その場だけを拡大する」ために、スタイルの干渉を防ぐ設計を意識しました。
使い方
メガネマークを押下すると虫眼鏡が出てきますよという代物です。
こだわったポイントと苦労した点
① 動作の「軽さ」と「なめらかさ」
mousemove イベントは1秒間に何度も発火するため、重い処理を直接書くと画面のカクつき（レイアウトシフトやフレームレートの低下）の原因になります。
そこで requestAnimationFrame を挟むことで、ブラウザのリフレッシュレートに合わせたスムーズな描画を実現しました。
② デザインの質感とUI
ツールとしての主張が強すぎるとWEBサイト閲覧の妨げになってしまいます。レンズの枠線や影（box-shadow）は主張しすぎない上品な陰影にし、設定画面（popup.html）も昭和モダン〜ミニマル感のある落ち着いた配色で統一しました。
作ってみて分かった「引き算の美学」
最初は「ズーム機能だけじゃなくて、スクリーンショット保存機能や文字起こし機能もつけようか…？」と欲が出たのですが、最終的にはあえて「拡大する」ということだけに特化させました。
余計な機能を削ぎ落とした結果、起動が圧倒的に早くなり、日常のちょっとした瞬間にストレスなく使えるツールに仕上がりました。
ブラウジング中に「この細かい図面やコードをちょっと大きく見たい」「小さな文字をストレスなく読みたい」という時に、手元でサクッと動いてくれる頼もしい相棒になっています。
まとめ
自分で「こういうのが欲しい」と思ったツールをコードに落とし込み、ブラウザ上で実際に動く形にするのはやっぱり最高に楽しい時間ですね！
今回作成した拡張機能は今後のブラッシュアップも視野に入れて調整を進めています。
みなさんも「日々のブラウジングでちょっと不便だな」と感じるポイントがあれば、ぜひChrome拡張機能の自作に挑戦してみてはいかがでしょうか！
chromewebstore.google.com
拡大鏡の離脱は「escキー」でお願いします。
