ส่วนขยาย '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.

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.

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

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

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

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

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.

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

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

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

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!