まずは動かす！最小構成のChrome拡張機能を作る手順

公開日：2026/06/01

Chrome拡張機能の仕組みを理解するには、最初から複雑な機能を作るよりも、まず小さな拡張機能を実際に動かしてみるのが近道です。

前回までの記事では、Chrome拡張機能の基本構成やManifest V3の考え方を整理しました。今回は、その知識を使って、ローカル環境で最小構成のChrome拡張機能を作ります。

最初に作るのは、拡張機能アイコンを押すとpopupが開き、「こんにちは」と現在時刻を表示するだけのシンプルな拡張機能です。

この段階では、特別な権限は使いません。まずは manifest.json、popup.html、popup.js の3つで動かします。

そのあと、発展例として、現在開いているタブのタイトルとURLを表示する処理も紹介します。この発展例では activeTab 権限を使います。

この記事の目的は、Chrome拡張機能を完成品として作り込むことではありません。「フォルダを作る」「ファイルを書く」「Chromeに読み込む」「popupが動く」という最初の成功体験を作ることです。

今回作るもの

今回は2段階で作ります。

まず、第1段階では、拡張機能アイコンを押したときに小さなpopupを表示します。popupには次の内容を出します。

こんにちは
現在時刻
簡単な説明文

第1段階は、Chrome拡張機能の最小構成を理解するためのものです。Webページを操作したり、外部APIと通信したり、データを保存したりはしません。

第2段階では、発展例として、現在開いているタブのタイトルとURLをpopupに表示します。

この発展例では、Chromeのタブ情報にアクセスするために activeTab 権限を追加します。

最初からすべてを作ると混乱しやすいので、まず権限不要のpopupを動かし、そのあとでタブ情報取得を追加する流れにします。

作業フォルダとファイル構成

まず、任意の場所に拡張機能用のフォルダを作ります。

この記事では、例として hello-time-extension というフォルダ名にします。

hello-time-extension/
├─ manifest.json
├─ popup.html
└─ popup.js

最初はこの3ファイルだけで始めます。

前回の記事で出てきた content.js や background.js は、今回はまだ使いません。

今回の目的は、popupを表示してJavaScriptを動かすことです。Webページ上にボタンを追加したり、ページ内の要素を操作したりする処理は、content scriptの記事で扱います。

manifest.json を作る

まず、manifest.json を作ります。

{
  "manifest_version": 3,
  "name": "Hello Time Extension",
  "version": "1.0.0",
  "description": "Popupに挨拶と現在時刻を表示する最小構成の拡張機能です。",
  "action": {
    "default_popup": "popup.html"
  }
}

manifest_version は 3 にします。現在のChrome拡張機能開発では、Manifest V3を前提に考えます。

name は拡張機能の名前です。Chromeの拡張機能管理画面などに表示されます。

version は拡張機能のバージョンです。最初は 1.0.0 のような値で構いません。

description は拡張機能の説明です。

action.default_popup には、アイコンを押したときに表示するHTMLファイルを指定します。今回は popup.html を指定します。

この時点では、permissions は書きません。こんにちは表示と現在時刻表示だけなら、特別な権限は不要です。

よりシンプルな公式サンプルも確認したい場合は、Chrome公式ドキュメントのHello World extensionも参考になります。

popup.html を作る

次に、popup.html を作ります。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Hello Time</title>
  <style>
    body {
      width: 260px;
      margin: 0;
      padding: 16px;
      font-family: sans-serif;
    }

    h1 {
      margin: 0 0 12px;
      font-size: 20px;
    }

    p {
      margin: 8px 0;
      font-size: 14px;
    }

    #current-time {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1 id="message">こんにちは</h1>
  <p>このpopupは最小構成のChrome拡張機能です。</p>
  <p>現在時刻：<span id="current-time"></span></p>

  <script src="popup.js"></script>
</body>
</html>

body の width は、popupの横幅を見やすくするために指定しています。

h1 には最初から「こんにちは」と書いています。

現在時刻は、span に id="current-time" を付けておき、あとで popup.js から書き込みます。

最後に、popup.js を読み込んでいます。

<script src="popup.js"></script>

popup画面の見た目は popup.html、動きは popup.js に分けると理解しやすくなります。

popup.js で挨拶文と現在時刻を表示する

次に、popup.js を作ります。

const messageElement = document.getElementById("message");
const currentTimeElement = document.getElementById("current-time");

const now = new Date();

messageElement.textContent = "こんにちは";
currentTimeElement.textContent = now.toLocaleString("ja-JP");

ここでは、現在時刻を new Date() で作り、toLocaleString("ja-JP") で日本語環境向けの文字列にしています。

これで、popupを開いた時点の時刻が表示されます。

この処理は、Chrome拡張機能専用のAPIを使っていません。通常のWebページで使うJavaScriptとほぼ同じです。

そのため、権限は不要です。

最初はこのくらい小さな処理から始めると、manifest.json、popup.html、popup.js の関係をつかみやすくなります。

Chromeで拡張機能を読み込む

ファイルを作ったら、Chromeに読み込みます。

手順は次の通りです。

Chromeで chrome://extensions を開く
右上の「デベロッパーモード」をオンにする
「パッケージ化されていない拡張機能を読み込む」を押す
作成した hello-time-extension フォルダを選ぶ
拡張機能一覧に表示されたことを確認する

日本語UIでは「パッケージ化されていない拡張機能を読み込む」と表示されることがあります。英語UIでは Load unpacked です。

ここで選ぶのは、manifest.json が入っているフォルダです。manifest.json ファイルそのものではありません。

読み込みに成功すると、拡張機能一覧に Hello Time Extension が表示されます。

popupを確認する

拡張機能を読み込んだら、Chromeのツールバーにある拡張機能アイコンから確認します。

表示されていない場合は、パズルピースのような拡張機能メニューを開き、作成した拡張機能をピン留めします。

アイコンをクリックして、popupが開けば成功です。

popupには「こんにちは」と現在時刻が表示されます。

もし現在時刻が表示されない場合は、以下を確認します。

popup.html で popup.js を読み込んでいるか
popup.js のファイル名が間違っていないか
id="current-time" の指定が一致しているか
拡張機能を変更後に再読み込みしたか

Chrome拡張機能では、ファイルを変更したあと、拡張機能管理画面で再読み込みが必要になることがあります。

発展例：現在タブのタイトルとURLを表示する

ここまでで、権限不要のpopupは動きました。

次に、発展例として、現在開いているタブのタイトルとURLをpopupに表示してみます。

この処理では、現在のタブ情報にアクセスするために activeTab 権限を使います。

activeTab 権限が有効になる条件や利用できる範囲は、Chrome公式ドキュメントのThe activeTab permissionで確認できます。

まず、manifest.json に permissions を追加します。

{
  "manifest_version": 3,
  "name": "Hello Time Extension",
  "version": "1.0.0",
  "description": "Popupに挨拶、現在時刻、現在タブ情報を表示する拡張機能です。",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html"
  }
}

次に、popup.html にタイトルとURLを表示する場所を追加します。

<h2>現在のタブ</h2>
<p>タイトル：<span id="tab-title"></span></p>
<p>URL：<span id="tab-url"></span></p>

body の中に追加すれば構いません。

最後に、popup.js を次のように変更します。

const messageElement = document.getElementById("message");
const currentTimeElement = document.getElementById("current-time");
const tabTitleElement = document.getElementById("tab-title");
const tabUrlElement = document.getElementById("tab-url");

const now = new Date();

messageElement.textContent = "こんにちは";
currentTimeElement.textContent = now.toLocaleString("ja-JP");

chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  const currentTab = tabs[0];

  if (!currentTab) {
    tabTitleElement.textContent = "取得できませんでした";
    tabUrlElement.textContent = "取得できませんでした";
    return;
  }

  tabTitleElement.textContent = currentTab.title || "タイトルなし";
  tabUrlElement.textContent = currentTab.url || "URLなし";
});

chrome.tabs.query() は、Chrome拡張機能のAPIです。

{ active: true, currentWindow: true } を指定することで、現在のウィンドウでアクティブなタブを取得します。

この発展例は、最初の「こんにちは」と現在時刻表示よりも一歩進んだ内容です。

ポイントは、タブ情報を取得する処理だけ権限が必要になることです。

単にpopupの中で現在時刻を表示するだけなら権限は不要ですが、Chromeのタブ情報にアクセスする場合は activeTab のような権限を意識する必要があります。

変更後は拡張機能を再読み込みする

manifest.json、popup.html、popup.js を変更したら、Chromeの拡張機能管理画面で再読み込みします。

手順は次の通りです。

chrome://extensions を開く
作成した拡張機能のカードを探す
再読み込みボタンを押す
popupを開き直して確認する

manifest.json を変更した場合は、特に再読み込みを忘れないようにします。

再読み込みしないと、古い設定のまま動いているように見えることがあります。

エラーが出たときの確認ポイント

最小構成でも、最初はエラーが出ることがあります。

よくある原因は、次のようなものです。

症状	確認すること
拡張機能を読み込めない	`manifest.json` のJSON形式が正しいか
popupが開かない	`default_popup` のファイル名が正しいか
時刻が表示されない	`popup.js` の読み込みパスとHTMLの `id` が一致しているか
タブ情報が出ない	`activeTab` 権限を追加し、拡張機能を再読み込みしたか
変更が反映されない	`chrome://extensions` で再読み込みしたか