확장 프로그램 프로젝트의 구성

An extension is just a bundle of HTML, CSS, JavaScript, and a config file, which the browser loads in a special, extra-capable context.

Every extension needs a manifest.json at its root — it declares name, version, permissions, and scripts. Without it, the browser ignores the folder.

Layout is flexible, but a clean folder structure stays maintainable: manifest at root, plus popup, background, content, and icons folders.

In Manifest V3, background logic runs as a service worker. It handles events even with no UI open, but unloads when idle to save memory.

The action defines the toolbar button and the popup it opens — itself just a tiny HTML page. The config below shows both fields.

Content scripts run inside web pages so your extension can read and modify the DOM. You scope them with URL match patterns.

Provide your icon in several sizes — browsers show it in different places at different resolutions, so it stays crisp everywhere.

The permissions array lists the browser APIs you need, like storage or tabs. Request only what you actually use.

If a web page must load a file packaged in your extension, list it under web_accessible_resources — otherwise the browser blocks access.

Popup, content scripts, and service worker live in separate contexts, so they talk via the messaging API, not shared variables.

As it grows, group related files into folders and keep manifest.json lean. A predictable layout makes debugging and store review easier.

Check what you remember about extension structure.

You toured the building blocks: manifest.json declares all, a service worker runs background, the action drives the popup, content scripts touch pages.