Chrome Extension Maker
Choose a type, fill in a few options and download a ready-to-load Manifest V3 extension for Chrome or Edge. It is built in your browser and asks for the fewest permissions it can.
Your files
🔒 The extension is built in your browser. Nothing you type is uploaded, and the ZIP contains no tracking or remote code.
🔒 Everything you type stays in your browser. Nothing is sent to a server.
By Shah Rukh, software developer · Last updated:
How to make a Chrome extension with this tool
- Pick an extension type and give it a name, a short description and a version number such as 1.0.0.
- Fill in the options for that type: the sites to block, the style changes, or your links.
- Choose an icon colour. The icon is a rounded square with the first letter of the name, drawn in three sizes.
- Check the files in the tabs, then press Download ZIP and unzip it.
- Open
chrome://extensions(oredge://extensions), switch on Developer mode, click Load unpacked and choose the unzipped folder.
The four extension types
| Type | What it does | Permissions it asks for |
|---|---|---|
| Site blocker | Sends the listed sites, and their subdomains, to a “blocked” page. | declarativeNetRequestWithHostAccess, plus access to the listed sites only |
| Page restyler | Adds a style sheet to the sites you choose: dark mode, bigger text, hidden elements, your own CSS. | None; Chrome lists the sites the style sheet runs on |
| New tab page | Shows a clock, the date, a greeting and your links on every new tab. | None |
| Quick-links popup | Adds a toolbar button that opens a list of your links. | None |
Each extension asks for the least it needs. That keeps the install warning short and means the extension cannot do more than its job.
What the options mean
Sites and domains
Type plain domains such as example.com. If you paste a full address, the tool keeps only the domain. A domain also covers its subdomains, so example.com includes www.example.com.
Dark mode and text size
Dark mode inverts the page’s colours and then flips pictures and videos back so they look normal. It is a simple method that works on most light pages; a site that is already dark will turn light. Text size uses page zoom, so pictures grow along with the words.
Hide elements
Each line is a CSS selector, such as .sidebar or #cookie-banner. Right-click the thing you want gone, choose Inspect and look for its class or id. Invalid selectors are skipped with a warning.
Links
Write Label | address. If you leave out https:// it is added for you. Only normal web addresses are accepted.
A worked example
To stop yourself opening social media while studying, choose Site blocker, list the sites, and set the message to “Back to your notes!”. The rules.json file then holds one rule per site, like this:
{
"id": 1,
"priority": 1,
"action": { "type": "redirect", "redirect": { "extensionPath": "/blocked.html" } },
"condition": { "requestDomains": ["instagram.com"], "resourceTypes": ["main_frame"] }
}
Chrome applies these rules itself, so the extension never reads your browsing. Pair it with the Pomodoro timer for focused study sessions.
Tips and limits
- Keep the unzipped folder. The browser loads the extension from it each time it starts.
- These are personal, unpacked extensions. Publishing to the Chrome Web Store is a separate process with a developer fee and a review, and this tool does not do it for you.
- The blocker needs Chrome or Edge 101 or newer. It is easy to switch off, so it is a nudge for yourself, not a parental control.
- Extensions cannot change browser pages such as
chrome://settingsor the Chrome Web Store. - Firefox and Safari use different loading steps and are not covered here.
Pick colours that are easy to read with the colour picker and the contrast checker.
Frequently asked questions
How do I install the extension I downloaded?
Unzip the file, open chrome://extensions, switch on Developer mode in the top right corner, click Load unpacked and choose the unzipped folder that contains manifest.json. In Edge the page is edge://extensions.
Is it safe to turn on Developer mode?
Developer mode only lets you load extensions from a folder on your computer. The risk comes from what you load, so only load folders you trust. You can read every file of this extension in the tabs before downloading.
What is Manifest V3?
It is the current format for Chrome extensions. The manifest.json file describes the extension, and version 3 does not allow code loaded from the internet. The extensions made here contain only the files you can see.
Can I publish the extension on the Chrome Web Store?
The ZIP is a valid starting point, but publishing needs a developer account with a one-time fee, store images, a privacy declaration and a review by Google. This tool is meant for personal extensions you load yourself.
Why does the browser warn me about developer mode extensions?
Chrome and Edge remind you when extensions that did not come from their store are running. That is expected for an extension you loaded yourself and it keeps working.
Does the extension work in Edge, Brave or Firefox?
Edge uses the same format and the README includes its steps. Other Chromium browsers such as Brave usually load it the same way, although we only tested Chromium. Firefox handles extensions differently and is not supported.
Related tools
Telegram Bot Maker
Build a Telegram bot without coding. Download ready-to-run Python.
Discord Embed Builder
Design Discord embeds with a live preview, JSON and discord.py code.
WhatsApp Link Generator
Make a wa.me chat link with a message, QR code and button.
Privacy Policy Generator
Answer a few questions and get a privacy policy template.
Terms & Conditions Generator
Tick the sections you need and get a terms and conditions template.
Robots.txt Generator
Build and test a robots.txt file for your site.