【ブラウザ拡張機能】JavaScriptを使ったポップアップ

はじめに

前回まででCSSを使ったポップアップを作りました。

今までは拡張機能のボタンを押すと、その下にポップアップが出ていました。

今回JavaScriptを使って、画面の中央に表示させます。

出来上がりは、以下のBlueskyを参照してください。

ではソースコードを展開します。

まずはmanifest.jsonから

{
    "manifest_version": 3,
    "name": "ポップアップテスト",
    "version": "1.0",
    "description": "ポップアップの練習",
    "content_scripts": [
        {
            "matches": ["https://*/*"],
            "js": ["content.js"]
        }
    ]
}

次にcontent.js

// モーダルの背景（暗いオーバーレイ）
const overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
overlay.style.zIndex = '99998';

// モーダルの本体（中央の四角）
const modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.top = '50%';
modal.style.left = '50%';
modal.style.transform = 'translate(-50%, -50%)';
modal.style.backgroundColor = 'white';
modal.style.padding = '30px';
modal.style.borderRadius = '12px';
modal.style.zIndex = '99999';
modal.style.width = '300px';
modal.style.textAlign = 'center';
modal.innerHTML = `
    <h2>こんにちは！</h2>
    <p>モーダルウィンドウです</p>
    <button id="closeBtn">閉じる</button>
`;

document.body.appendChild(overlay);
document.body.appendChild(modal);

// 閉じるボタン
document.getElementById('closeBtn').addEventListener('click', function() {
    overlay.remove();
    modal.remove();
});

// 背景クリックでも閉じる
overlay.addEventListener('click', function() {
    overlay.remove();
    modal.remove();
});

これを拡張機能に取り込むとBlueskyの動画になります。

1.manifest.jsonの設定

前回までの解説でdescriptionまでは行いましたので、割愛します。

問題は次の箇所です。

    "content_scripts": [
        {
            "matches": ["https://*/*"],
            "js": ["content.js"]
        }
    ]

content_scriptsは動的に動かすJavaScriptと思っていただいて構いません。

裏でJavaScriptが動きっぱなしのbackgroundというものもあるのですが、それは先に進んでからお話します。

matchesの箇所の"https://*/*"ですが、すべてのWebサイトを開いたときにポップアップが出るように設定するという意味です。

「*」これはワイルドカードといって、すべてを表すキーワードとなっています。

当然特定のサイトに限定してポップアップを出したい場合は、そのサイトのURLを直接入れることで、他のサイトには出ずにそのサイトだけ出すことができます。

"js": ["content.js"]

これはポップアップを出すJavaScriptのファイルです。

今回はcontent.jsとしています。

別にhogehoge.jsとしても、そちらにちゃんとソースコードを書いていれば動きます。

2.content.jsについて(モーダル背景)

こちらはごちゃっとしていますが、1つずつ解説します。

まずはソースの最初にある、モーダルの背景からです。

// モーダルの背景（暗いオーバーレイ）
const overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
overlay.style.zIndex = '99998';

コメントにも書いてありますが、ポップアップを出したときに背景色を半透明の黒にします。

モーダルとは画面上に表示される特定のウィンドウやメッセージを完了・解除するまで、他の操作を一時的に制限（ブロック）する状態や画面を指します。

const overlay = document.createElement('div');

こちらで最初にモーダル用の空箱を作ります。

overlay.style.position = 'fixed';

こちらで画面を固定します。

スクロールしても動かないようにするためです。

overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';

これで左上を起点として、画面全体を覆う設定をします。

overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';

画面全体を背景色黒の半透明で覆うようにします。

rgbaのrgbは色の三原色(赤、緑、青)、aは透明度を表していて、0から1になるにつれて不透明度が高くなります。

overlay.style.zIndex = '99998';

これは画面の前に表示するための設定です。

'99998'と中途半端な数字になっているのは、後述するポップアップ画面が一番前に来るようにしているからです。

3.content.jsについて(モーダル本体。ポップアップ画面)

次にポップアップ画面の作成について解説します。

// モーダルの本体（中央の四角）
const modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.top = '50%';
modal.style.left = '50%';
modal.style.transform = 'translate(-50%, -50%)';
modal.style.backgroundColor = 'white';
modal.style.padding = '30px';
modal.style.borderRadius = '12px';
modal.style.zIndex = '99999';
modal.style.width = '300px';
modal.style.textAlign = 'center';
modal.innerHTML = `
    <h2>こんにちは！</h2>
    <p>モーダルウィンドウです</p>
    <button id="closeBtn">閉じる</button>
`;

2行目は先ほどと同じく、ポップアップ用の箱を用意するための設定です。

3行目も同様なので割愛します。

次がミソなのですが、ポップアップの位置を調整します。

modal.style.top = '50%';
modal.style.left = '50%';
modal.style.transform = 'translate(-50%, -50%)';

画面中央に出すのですが、ポップアップ画面も四角いオブジェクトであるため、3行目の命令がないと、ポップアップ画面の左上が中央と認識して表示させてしまいます。

故に3行目を除いてしまうと、少しポップアップの画面が中央からずれていることがわかります。

そして3行目の命令で四角いオブジェクトの位置を、縦横それぞれ-50%にして調整します。

これで、画面中央にポップアップ画面が表示されます。

modal.style.backgroundColor = 'white';
modal.style.padding = '30px';
modal.style.borderRadius = '12px';
modal.style.zIndex = '99999';
modal.style.width = '300px';
modal.style.textAlign = 'center';

この辺はポップアップの画面設定になります。

一番上が背景色で白色、次のpaddingは四角の中の余白を30pxに、borderRadiusは角張ったポップアップを丸める役目を果たしていて、角度を12pxほど丸くしています。

zIndexは'99999'と設定しています。

これは上記2のモーダル背景より前面にポップアップを表示させるためです。

最後の2行はポップアップ画面の幅が300px、テキストの表示を中央寄せしています。

modal.innerHTML = `
    <h2>こんにちは！</h2>
    <p>モーダルウィンドウです</p>
    <button id="closeBtn">閉じる</button>
`;

こちらはポップアップ画面の中身をHTMLで書いています。

innerHTMLはそのための命令です。``で括られたところにHTMLを書き込みます。

4.残りのソースについて

残るところは以下になります。

document.body.appendChild(overlay);
document.body.appendChild(modal);

// 閉じるボタン
document.getElementById('closeBtn').addEventListener('click', function() {
    overlay.remove();
    modal.remove();
});

// 背景クリックでも閉じる
overlay.addEventListener('click', function() {
    overlay.remove();
    modal.remove();
});

最初の2行は項番2,3で作成したものを、画面に出す処理です。

zIndexを着実に行使するため、この順番で処理しています。

最後の2つの処理はコメントに書いてあるとおり、ポップアップの閉じるボタンを押したときと、背景をクリックしたときにポップアップと背景の半透明黒を消す作業をしています。

閉じるボタンは、3のinnerHTMLにかかれている、closeBtn(閉じるボタン)をクリックしたときにポップアップと背景の半透明を消すという意味です。

背景クリックは｢overlay.addEventListener('click'｣のところで処理しています。

どちらも関数が呼ばれたときに、ポップアップと背景の半透明を消す同じ処理がされているのがわかります。

まとめ

ソースコードはJavaScriptを使っているため、長くなりましたが技術的には難しいところは非常に少ないです。

位置の計算等少々面倒くさいところがありますが、それでもポップアップの画面の設計をシンプルにしてしまえば、簡単になりますし格好良く仕上げたい場合は、難易度というか面倒くささが出てきます。

目的は簡易なポップアップを出すことなので、それほど凝っている作りにはなっていません。

透過背景の色とか数字をいじくって、色の変化を楽しむのも実験としては面白いと思うので、パラメータをこねくり回して楽しんでみてください。

📚 著書・ツールのラインナップ

人生の突発的なカオスをシステムでサバイブするための、実戦から生まれた武器たちです。

【時間捻出のための圧倒的バイブル】

『会社公認・爆速仕事術：管理者権限なしでできるPC魔改造』

★読者より「星3つ」の評価を獲得しました！ 今回の拡張機能開発のように、自分の学習リソース（時間）を捻出するための、PC環境最適化ノウハウを凝縮した1冊。

管理者権限がない会社PCでも、今日からできる設定変更の知恵を詰め込みました。Kindle Unlimited（読み放題）対象です。

『手取り23万円のエンジニアが、Excel一枚で実家の破綻を防いだ話: 家族介護ファイナンスプログラム構築記』

実家の財務という「ブラックボックス」をExcelで細分化・可視化し、親の経済的破綻と突発的な無心を未然に防ぐためのリアルなプロジェクトマネジメント記録。

こちらもKindle Unlimited対象です。

最後に

本マガジンでは、プログラミング学習における「問題を細かく分解し、仕様化していくプロセス」を淡々と記録していきます。

「感情論に流されず、ファクトと仕組みでスマートに生き残りたい」と感じた方は、ぜひフォローをお願いいたします。ともに仕様をアップデートしていきましょう。