【ブラウザ拡張機能】事始め

2026年7月9日 19:00

はじめに

本記事は、Vivaldiというブラウザを使って検証を行い、実際に動いたものについてまとめた学習ログです。今後の検証も基本的にはVivaldiで行います。Chromium系のブラウザ（Google Chromeなど）でも同様に動くと思いますが、使用は自己責任でお願いします。

それでは始めます。

ブラウザ拡張機能とは、ブラウザに特殊な動作をさせる機能のことです。Webサイトの背景色を真っ暗にするような簡単なものから、ブラウザの操作を自動化するような複雑なことまで実行できます。

ブラウザ拡張機能を実現するにあたって最低限必要なのは、以下のファイルです。

manifest.json：拡張機能の設定を記述するデータファイル
HTML / CSS：画面（UI）を表示する場合に使用
JavaScript：動的な処理を行う場合に使用

今回は、HTMLファイルを使ってシンプルなポップアップを表示させるプログラムを作成します。

完成形は以下の動画のようになります。

今回簡単ではありますが、JavaScriptの勉強がてらブラウザ拡張機能の一番シンプルなものを作ってみました。ただポップアップをHTMLで表示するだけのものですが、「え、これだけ？」と自分でも思ったので、次はCSSやbootstrapを使った表示に、最終的にはJavaScriptでよく自社サイトに訪れると画面中央に申し込みのポップアップがでるサイトがあるので、そちらのベース技術について発展させていく予定です。プログラムはいきなり難易度が上がる問題があるので、理解できることを少しずつ増やしていきます。 #ブラウザ拡張機能 #HTML #manifest.json
— 神経質やせ男 (@wwphilosophy.bsky.social) 2026-07-05T22:15:14.341Z

1. manifest.jsonの作成

まず、設定ファイルである「manifest.json」を作成します。必ずこのファイル名で作成してください。そうしないとブラウザが拡張機能として認識しません。

中身は以下の通りです。

{
    "manifest_version": 3,
    "name": "ポップアップテスト",
    "version": "1.0",
    "description": "ポップアップの練習",
    "action": {
        "default_popup": "popup.html"
    }
}

各項目の記述ルールは以下のようになっています。

    "manifest_version": 3,
    "name": "ポップアップテスト",
    "version": "1.0",

manifest_version と version は、基本的にはこの文言のままで固定してください。
name には、その拡張機能が何をするものなのかを一言で分かりやすく記述します。

"description": "ポップアップの練習",

この項目はなくても動作に問題はありませんが、主にどのような機能なのかという説明を記述します。

"action": {
        "default_popup": "popup.html"
    }

ここが今回の処理の肝です。アイコンをクリックした際に、同じフォルダ内にある「popup.html」を呼び出して画面に表示させる指定をしています。

2. popup.htmlの作成

次に、表示する画面となる「popup.html」の中身です。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>こんにちは!</h1>
        <p>ポップアップが開きました!</p>
    </body>
</html>

今回は拡張機能の解説ですので、HTMLの細かい文法は省略します。 <body> タグの間にある「こんにちは！」と「ポップアップが開きました！」という文字列が、今回ポップアップ内に表示される内容になります。

3. ブラウザへの導入手順

作成した2つのファイルを使って、実際にブラウザへ導入します。

適当な名前で新規フォルダを作成し、その中に「manifest.json」と「popup.html」の2つのファイルを格納します。
VivaldiのURL入力欄に vivaldi:extensions と入力してエンターキーを押します（拡張機能管理画面が開きます）。
画面にある「解凍された拡張機能を読み込む」ボタンを押します。
先ほど2つのファイルを格納したフォルダを選択します。

これでブラウザの右上に新しいアイコンが追加されます。

アイコンをクリックするとポップアップが表示され、もう一度クリックすると消えます（詳細は冒頭の動画を参照してください）。

まとめ

これが、ブラウザ拡張機能において最もシンプルで難易度の低い構造です。

ただ、これだけでは見た目が不格好であったり、実用性に乏しいなどの課題があることも事実です。

今後はこのポップアップをベースに、少しずつ機能を拡張させていきます。

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

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

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

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

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

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

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

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

こちらもKindle Unlimited対象です。

最後に

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

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

いいなと思ったら応援しよう！

いつも記事を読んでいただいて、ありがとうございます。もし気に入っていただけたなら応援お願いします！いただいたチップは創作活動と寄付に使わせていただきます。m(_ _)m