HOME > ブラウザ > 拡張機能 > ChromeとFirefoxにて拡張機能(アドオン)にポップアップを追加する方法

ChromeとFirefoxにて拡張機能(アドオン)にポップアップを追加する方法

2026/09/03 拡張機能ブラウザ

先日ChromeとFirefoxにてHello World表示する拡張機能(アドオン)を作成したが、これを変更して拡張機能専用のポップアップ(ダイアログ)上にHello Worldを表示させたい。以下に対応方法をメモ。

1 事前準備
- 1.1 (必要に応じて)アイコン画像の作成
- 1.2 ディレクトリの用意
2 拡張機能の作成
3 確認方法
- 3.1 ポップアップの確認
- 3.2 コンソールの確認
  - 3.2.1 Google Chromeの場合
  - 3.2.2 Firefoxの場合
4 リファレンス
- 4.1 chrome.action

事前準備

(必要に応じて)アイコン画像の作成

アイコン画像ジェネレーター等でアイコン画像を作成しておく。今回は128x128サイズのpng画像を「128.png」というファイル名で作成した。

ディレクトリの用意

以下ディレクトリをPC内に作成しておく。以降拡張機能に関するファイルはhello_world_popup内に作成する。

hello_world_popup/
└icons/
  └ 128.png

拡張機能の作成

拡張機能のための各種設定ファイル(manifest.json)

以下をmanifest.jsonというファイル名で作成する。

対象サイト部分(content_scripts内のmatches)は適宜変更すること。

{
    //開発仕様
    "manifest_version": 3,

    //拡張機能名
    "name": "ポップアップでHello World表示",

    //バージョン
    "version": "1.0",

    //拡張機能の説明
    "description": "ポップアップでHello Worldを表示します",

    //拡張機能が操作できるページ
    "host_permissions": [
        //全てのURL
        "<all_urls>"
    ],

    //アイコン設定
    "icons": {
        "128": "icons/128.png"
    },

    //ポップアップ設定
    "action": {
        //ツールバーのアイコンを指定する場合(省略可。省略した場合はiconsで指定した画像が使用される)
        "default_icon": "icons/128.png",

        //ポップアップ(ダイアログ)のパス
        "default_popup": "popup.html"
    },

    //特定のブラウザ専用の設定
    "browser_specific_settings": {
        //firefox用設定
        "gecko": {
            //ユニークID(実際のメールアドレスにはしない)
            "id": "hello_popup@sample.org",

            //データ収集に関する設定
            "data_collection_permissions":{
                "required": ["none"]
            }
        }
    },

    //対象サイトと読み込むファイルの設定
    "content_scripts": [
        {
            //対象サイト
            "matches": ["*://test.com/*"],
            //全サイトを指定したい場合は以下
            //"matches": ["<all_urls>"],

            //使用するJavaScriptファイルのパス
            "js": ["main.js"]
        }
    ]
}

ポップアップ画面のHTML(popup.html)

ポップアップ画面に関するHTMLファイルを以下の通り作成する。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="popup.css" rel="stylesheet">
</head>
<body>
    <h1>Hello World</h1>
    <script src="popup.js"></script>
</body>
</html>

ポップアップ画面のCSS(popup.css)

body{
    width: 280px;
    padding: 12px;
    font-family: sans-serif;
    font-size: 13px;
}
h1{
    font-weight: bold;
    font-size: 20px;
    color: #f00;
}

メイン処理用のJS(main.js)

コンソール確認用に以下ファイルを作成。

console.log('main.js');

ポップアップ側処理用のJS(popup.js)

こちらもコンソール確認用に以下ファイルを作成。

console.log('popup.js');

補足

ディレクトリ構造とファイル設置状況

以下のようになっていればOK。

hello_world_popup/
├── icons/
│   └── 128.png
├── main.js
├── manifest.json
├── popup.css
├── popup.html
└── popup.js

拡張機能のインストール

拡張機能のインストール方法は過去記事を参照。

確認方法

ポップアップの確認

インストール後、ツールバーにピン止めしてアイコンをクリックするとポップアップが表示される筈。

コンソールの確認

main.jsのconsole.logはブラウザ開発者ツール(F12)で確認できるが、popup.jsのものは表示されない筈。以下方法で確認する。

Google Chromeの場合

ツールバー上のアイコンを右クリックし「ポップアップを検証」をクリックすると専用の開発者ツールが起動し、そちらにpopup.jsのconsole.logが表示される筈。

Firefoxの場合

「about:debugging#/runtime/this-firefox」を開き、確認したい拡張機能の「調査」ボタンをクリックすると専用の開発者ツールが起動し、そちらにpopup.jsのconsole.logが表示される筈。

リファレンス

chrome.action

https://developer.chrome.com/docs/extensions/reference/api/action?hl=ja

- 拡張機能ブラウザ

: 指定サイトのaタグにblank化、クリック済みの場合は文字色を変更するブラウザ拡張機能の作成方法

ポップアップ内にテキストエリアを設置し、そちらにドメインを入力すると該当サイトの ...

: ChromeとFirefoxにてHello World表示する拡張機能(アドオン)を作成する方法

Google Chrome / Firefoxの拡張機能(アドオン)を作ってみた ...