Step 1: Create the Manifest File
Every Chrome extension starts with a manifest.json file. This file tells Chrome the extension's name, version, permissions, and entry points. With Manifest V3, you define a service worker instead of a background page.
Create a new folder for your extension and add a manifest.json with the required fields: manifest_version (set to 3), name, version, and description. Add an action field to configure the toolbar icon and popup.
Step 2: Build the Popup UI
The popup is the small window that appears when users click your extension icon. It is a regular HTML file referenced in the manifest's action.default_popup field. Use HTML and CSS to create the interface, then add JavaScript for interactivity.
Step 3: Add Content Scripts
Content scripts run in the context of web pages. They can read and modify the DOM, allowing your extension to interact with page content. Define them in the manifest under the content_scripts key with URL match patterns to control which pages they run on.
Step 4: Set Up the Service Worker
The service worker is the extension's background process in Manifest V3. It handles events like tab updates, alarms, and messages between content scripts and the popup. Unlike the old background pages, service workers are event-driven and do not persist in memory.
Step 5: Test Locally
Open chrome://extensions in your browser, enable Developer mode, and click "Load unpacked". Select your extension folder. Chrome will load the extension and you can test it immediately. Changes to code require clicking the refresh icon on the extension card.
Step 6: Publish to Chrome Web Store
Once your extension is working, zip the project folder and upload it to the Chrome Web Store Developer Dashboard. Fill in the listing details, add screenshots, and submit for review. Most extensions are reviewed within a few business days.
After publishing, make sure to test your extension across different environments. Automated cross-browser testing helps ensure your extension works consistently for all users.