Browser Extensions Development (Chrome & Edge) · レッスン

初めての「Hello World」拡張機能

manifestファイル、基本構造、ブラウザーへの読み込み方法を学びながら、最小構成の「Hello World」拡張機能を作成します。

「初めての「Hello World」拡張機能」はCoddyKit上の無料Browser Extensions Development (Chrome & Edge)レッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはBrowser Extensions Development (Chrome & Edge)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Your First Extension: Hello World

Time to build your first extension — a classic Hello World popup that greets you when you click its toolbar icon. The core Manifest V3 shape.

Core Extension Components

Every extension needs a few key files: manifest.json (the blueprint), popup.html (the popup content), and an icon. We'll build them step by step.

Manifest.json: The Blueprint

The manifest.json is the most important file — JSON metadata like name, version, and permissions, in the structure Manifest V3 expects.

Essential Manifest Fields

Start your manifest with three required fields: manifest_version 3, a name, and a version. The snippet below shows the minimal shape.

{ "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0"
}

Adding Description & Icons

Add a description and an icons map so users understand and recognize your extension. Provide several sizes like 16, 48, and 128 pixels.

{ "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "A simple 'Hello World' extension for CoddyKit.",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

Defining the Popup with 'action'

The action field defines the toolbar button: default_popup points to your popup HTML, and default_icon sets the toolbar image.

{ "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "A simple 'Hello World' extension for CoddyKit.",
  "icons": { "16": "icon16.png" },
  "action": {
    "default_popup": "popup.html",
    "default_icon": { "16": "icon16.png" }
  }
}

Creating popup.html

Create popup.html — a plain HTML file holding your Hello World message. Keep it small and light, since it shows in a tiny popup window.

<!DOCTYPE html>
<html>
<head>
  <title>Hello World Popup</title>
  <style>
    body { font-family: sans-serif; padding: 15px; width: 150px; }
    h1 { font-size: 1.2em; color: #333; margin: 0; }
  </style>
</head>
<body>
  <h1>Hello, CoddyKit!</h1>
</body>
</html>

Your Extension's Folder Structure

Your folder should now hold manifest.json, popup.html, and the icons, all directly inside — a clean layout the browser can load correctly.

Loading Your Extension (Chrome)

Load it in Chrome or Edge: open chrome://extensions, flip on Developer mode, click Load unpacked, and pick your folder. It joins the list!

Test Your New Extension!

Spot your extension's icon in the toolbar and click it — a popup appears reading "Hello, CoddyKit!" from your popup.html. First extension done!

Quick Check: Manifest V3

Which field is absolutely essential to declare the manifest format version in manifest.json for a Manifest V3 extension?

Recap: Your First Extension

You built and loaded a real extension: a manifest with key fields, an action popup, a popup.html, all run via Developer mode. Keep tinkering!

よくある質問

「初めての「Hello World」拡張機能」レッスンは無料ですか？

はい。「初めての「Hello World」拡張機能」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Browser Extensions Development (Chrome & Edge)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。

「初めての「Hello World」拡張機能」で何を学びますか？

manifestファイル、基本構造、ブラウザーへの読み込み方法を学びながら、最小構成の「Hello World」拡張機能を作成します。ブラウザで直接実行するハンズオンコードでBrowser Extensions Development (Chrome & Edge)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Browser Extensions Development (Chrome & Edge)を始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのBrowser Extensions Development (Chrome & Edge)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「初めての「Hello World」拡張機能」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このBrowser Extensions Development (Chrome & Edge)レッスンでコードを書いて実行できますか？

はい。すべてのBrowser Extensions Development (Chrome & Edge)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Browser Extensions Development (Chrome & Edge)に戻る