A settings page for a Manifest V3 extension with chrome.storage.sync (and no framework)

Alexander Burnett — Mon, 19 Oct 2026 17:16:41 +0000

When I built the options page for Promo Drop, I wanted three toggles, instant saves, and settings that follow the user to every Chrome they sign in to. No React, no build step. Here is the whole pattern.

1. Declare the page in the manifest

"options_ui": { "page": "options.html", "open_in_tab": true },
"permissions": ["storage"]

storage is the only permission this page needs.

2. One source of defaults

const DEFAULTS = { showPanel: true, showCashback: true, compactMode: false };

Keep this in one place and pass it to every get call, so a first-time user never sees undefined.

3. Load the saved values

document.addEventListener('DOMContentLoaded', async () => {
  const settings = await chrome.storage.sync.get(DEFAULTS);
  for (const [key, value] of Object.entries(settings)) {
    const box = document.getElementById(key);
    if (box) box.checked = value;
  }
});

Passing the defaults object as the key means Chrome fills in anything missing for you.

4. Save on change, not on a Save button

document.addEventListener('change', (e) => {
  if (e.target.matches('input[type="checkbox"]')) {
    chrome.storage.sync.set({ [e.target.id]: e.target.checked });
  }
});

One listener covers every toggle, and users never lose a change because they forgot to click Save.

5. React to changes everywhere else

chrome.storage.onChanged.addListener((changes, area) => {
  if (area === 'sync' && changes.showPanel) {
    togglePanel(changes.showPanel.newValue);
  }
});

Your content script updates live, in every open tab, the moment the user flips a switch.

Things that caught me out

storage.sync has quotas (about 100 KB total and 8 KB per item). Settings fit easily; anything bigger belongs in storage.local.
The sync write rate is limited, so never call set inside a slider's input event. Use change.
Test with a second Chrome profile signed in to the same account to watch sync happen.

That is the entire options page: one HTML file, about 30 lines of JavaScript, and nothing to build. The extension it belongs to lists tested Whop promo codes; you can see it at promodrop.codes.

What I Learned Shipping My First Chrome Extension to the Web Store

Alexander Burnett — Mon, 17 Aug 2026 16:23:02 +0000

I spent the last few months building and shipping a Chrome extension called Promo Drop, a free tool that finds verified promo codes and cashback for products on Whop. It is live on the Chrome Web Store now. This is a write-up of what I learned getting it there, minus the one part I cannot share (more on that below).

Quick background on me: I studied at Lancaster University, spent a while day trading, and ended up buying courses and communities on Whop. I kept noticing two things. Working discount codes existed but were painful to find, and when there was no code, there was often no way to claw anything back. So I built the tool I wished existed.

Here is what actually taught me something.

Manifest V3 is a genuinely different mental model

If your knowledge of extensions is a few years old, throw it out. There is no persistent background page anymore. You get a service worker that Chrome spins up and tears down whenever it feels like it, so you cannot lean on in-memory state surviving between events. Anything that needs to persist has to go into storage, and you have to design around the worker being asleep most of the time. Half my early bugs were just me assuming a variable would still be there. It would not be.

The Web Store review process rewards being boring and honest

The single biggest thing that smoothed my reviews: request the absolute minimum permissions, and write a plain-English justification for every single one. Reviewers are looking for extensions that ask for more than they need. If your permissions map cleanly onto features a user can see, and your privacy policy actually matches your behaviour, you make their job easy and you get through faster. I also kept the extension scoped to only run where it needs to, rather than on every site, which is both better for users and an easier review.

Move your secret sauce off the client, on purpose

Here is the part I will not detail: how Promo Drop actually determines the codes. That logic is the whole value of the product, so it does not live in the extension at all. The client is deliberately thin. It sends a URL to my server, and the server responds with the result. The extension itself contains nothing that would let someone reverse-engineer the method.

This started as IP protection but turned out to be good engineering regardless. Anything shipped in an extension is fully readable by anyone who unzips the package, there is no such thing as a client-side secret. Pushing the real work server-side meant I could change the logic without shipping an update, cache results, rate-limit abuse, and keep the client tiny. If any part of your product is a competitive advantage, assume the client is public and design accordingly.

The ethics line was a feature decision, not an afterthought

Promo Drop earns an affiliate commission, and I made a rule early: attribution only ever happens on a genuine user action, and it never overwrites an affiliate link someone else set. No silent background cookie-dropping, no hijacking. Beyond it being the right thing, it is also just more durable, the aggressive stuff is exactly what gets extensions pulled and brands angry. Building the honest version from day one meant I never had to walk anything back.

Nobody wants your UI in their face

My first version threw a banner up the moment it had something. It worked, and it was annoying. I moved to a quieter model: a small indicator, and the details only when the user chooses to look. Engagement went up when I got out of the way. For anything that lives on top of someone else's page, restraint is the feature.

Would I do it again?

Yes. Shipping something real to a store with a review gate forces a discipline that side projects usually let you skip: least privilege, honest copy, a privacy policy you actually honour. Even if the extension went nowhere, I would have learned more than from ten unfinished repos.

If you want to see the finished thing, it is at https://promodrop.codes/ . Happy to answer questions about the MV3 or Web Store side in the comments.

DEV Community: Alexander Burnett