開発環境のセットアップ

Before building, set up your workspace — prepping tools first makes coding smoother and lets you test your extensions efficiently.

Your browser is your lab. Chrome and Edge have built-in dev features; the first step is flipping on their special "Developer Mode."

Enable Developer Mode: open chrome://extensions and toggle the switch in the top-right. That unlocks loading and testing your own extensions.

Each extension needs its own folder for all its files. Make an empty one — say my-first-extension — where we'll drop the manifest and code.

The manifest.json is your extension's blueprint — it tells the browser the key details. Start with a minimal one in your folder.

Any editor works, but a real code editor adds highlighting, autocomplete, and debugging. VS Code is the free, popular pick — grab it if needed.

With Developer Mode on, click Load unpacked and select your folder. Your extension should appear in the list, maybe with an icon in the toolbar.

After editing files, the browser won't see changes until you reload — hit the refresh icon on your extension's card in chrome://extensions.

Debug extensions with DevTools, just like web pages. Each card links to its background "service worker" or popup inspector for digging in.

You've learned the essential steps to prepare your browser and load your first extension. Let's test your understanding!

Which of the following actions is necessary to see changes in your extension after modifying its files?

Your environment is set: Developer Mode on, a folder with manifest.json, loading and reloading unpacked, and DevTools for debugging. Onward!