DEV Community: Mohan

Introducing CommentIQ: On-Device AI for YouTube Comment Analysis

Mohan — Sun, 05 Jul 2026 09:00:27 +0000

CommentIQ is a Chrome extension that reads the comments section of any YouTube video and runs sentiment analysis, topic clustering, and question extraction — entirely on your device using Gemini Nano. No API calls, no backend, nothing leaves the browser. This is a writeup of the parts that actually gave us trouble.

Getting comments without an API

YouTube killed public API access for comments years ago. That means the only way to read them is from the page itself.

YouTube is built on Polymer with custom elements — ytd-comment-renderer, ytd-comment-thread-renderer and friends. They're not plain HTML. The text you want sits inside a #content-text element nested several shadow-DOM layers deep in each renderer. Querying for it is straightforward once you know the selector; the hard part is when to query.

Comments don't exist in the DOM when the page loads. YouTube lazy-loads them as the user scrolls toward the bottom of the page. We initially tried waiting for a fixed delay after navigation — fragile, obviously — before switching to a MutationObserver watching ytd-comments:

const observer = new MutationObserver(() => {
  const threads = document.querySelectorAll('ytd-comment-thread-renderer');
  if (threads.length > 0) {
    observer.disconnect();
    extractAndAnalyze(threads);
  }
});
observer.observe(document.body, { childList: true, subtree: true });

This worked until we hit YouTube's intersection-observer-based lazy render: threads exist in the DOM but their inner content isn't populated until they scroll into view. We ended up triggering a programmatic scroll to force the first batch to render, then immediately scrolling back. Hacky, but reliable.

YouTube is a SPA and it will surprise you

The bigger navigation problem: YouTube never does a full page load between videos. It's a single-page app using the History API. Your content script loads once per tab and keeps running as the user clicks from video to video.

chrome.webNavigation.onHistoryStateUpdated fires for each video navigation, but it fires before the new page's DOM is ready. We had to debounce and re-run the observer setup on each navigation event, making sure to cancel any in-flight analysis from the previous video first.

We also ran into the extension popup losing its connection to the content script mid-session. The pattern that worked: keep a port open between popup and content script, detect onDisconnect, and show a "reload the page" nudge rather than silently failing.

Feeding Gemini Nano without hitting the context limit

Chrome's built-in Prompt API (via window.ai.languageModel) has a context window. A popular video can have thousands of comments; sending all of them at once overflows it immediately.

We first check token capacity before each request:

const session = await window.ai.languageModel.create();
const available = session.tokensLeft;

Then we batch comments into chunks that each fit comfortably under the limit, run analysis on each chunk, and merge results. For sentiment this means averaging scores across chunks. For topic clustering we run a second summarisation pass over the chunk outputs rather than the raw comments.

The model also needs to be downloaded before first use. window.ai.languageModel.capabilities() returns { available: 'readily' | 'after-download' | 'no' }. When it's after-download we show a progress indicator and poll until it flips to readily. When it's no — typically because the device doesn't meet the hardware requirements — we surface a clear message rather than a silent failure.

Structuring the output

Raw Gemini Nano output isn't JSON. We prompt for structured output explicitly and then parse it, with a fallback for when the model goes off-script:

const prompt = `
Analyze these YouTube comments and return ONLY valid JSON with this shape:
{ "sentiment": { "positive": 0-100, "neutral": 0-100, "negative": 0-100 },
  "topics": ["string", ...],
  "questions": ["string", ...],
  "ideas": ["string", ...] }

Comments:
${batch}
`;
try {
  result = JSON.parse(await session.prompt(prompt));
} catch {
  result = fallbackParse(rawOutput);
}

The fallback uses regex to pull numbers and lists out of whatever text the model returned. It covers about 95% of the cases where strict JSON parsing fails.

Shipping without a backend

Like Margin, we wanted zero server infrastructure. Everything is stored in chrome.storage.local — analysis results are cached per video ID so re-opening the extension on the same video is instant.

The only outbound request CommentIQ ever makes is to Lemon Squeezy's public License API for key validation on the Pro tier. No secret is embedded in the extension; the API is designed to be called client-side. The license check runs once at activation and the result is cached locally — subsequent launches don't hit the network at all.

For the Chrome Web Store review we had to document this data flow explicitly. The reviewers flagged the activeTab and scripting permissions as potentially broad; the response was a clear explanation in the privacy policy that we only read from ytd-comment-renderer elements on youtube.com/* and never transmit that data.

What we'd do differently

The multi-pass chunking adds latency that's noticeable on videos with dense comment sections. A streaming UI — showing results as each chunk completes rather than waiting for the full merge — would hide this better. It's on the list.

The other thing: we underestimated how much YouTube's DOM changes between A/B test variants. The comment container selector broke twice during development because YouTube was testing different layouts. A more defensive selector strategy with fallbacks would save debugging time.

CommentIQ is live on the Chrome Web Store — free to install, no account required. Questions or feedback welcome in the comments.

Building tapdot tools: 90+ single-purpose utilities, zero backends, zero accounts

Mohan — Sat, 04 Jul 2026 18:40:21 +0000

I got tired of counting words for a blog draft on a site that wanted to email me a "productivity report" afterward. Then I needed to format some JSON and landed on a tool wrapped in ad networks with a cookie banner that took longer to dismiss than the formatting took to run. That's the origin story: every small utility I needed lived on a site that wanted something back — an email, a tracking pixel, an account "to save my history."

So I built tapdot tools — 92 tools now, one job each, no backend, no build step, no accounts, nothing you type ever sent anywhere unless the page says otherwise in plain English. This is the build log.

The pain point, specifically

A JSON formatter is maybe 40 lines of JS — building one isn't hard. The problem is the business model around free web utilities: it's almost always ads or data, because a one-off tool has no other way to pay for itself. You end up on a fragmented web where every tool lives on a different domain with a different privacy policy, half of which you didn't read.

The fix isn't a better tool. It's removing the reason to ever ask the question. If nothing leaves the browser, there's no policy to worry about.

Static, browser-only, no exceptions without a receipt

Every tool is plain HTML/CSS/JS in its own folder — no React, no bundler, no build step. That's not a performance flex, it's a trust mechanism: you can view-source any tool and see exactly what runs, because what runs is the source.

The rule I hold hardest: any tool that talks to the network has to disclose it, specifically, in the privacy policy. Right now that's two exceptions out of 92 tools — an optional URL-lookup proxy for one citation tool, and a currency exchange-rate fetch (rates only, never your amounts). Everything else is closed off from the network entirely by construction, not by promise. I did prototype a dictation tool using the browser's speech recognition API, but killed it before shipping — more on why below.

Making 92 static pages feel like one app, without a router

The hard part of "no backend, no framework" is that plain multi-page sites feel like the '90s — full reload, white flash, lost scroll position. Two browser features did the whole job:

@view-transition {
  navigation: auto;
}

That animates the swap between pages natively — no client-side router, no virtual DOM. Pair it with Speculation Rules so hovering a link prerenders the destination in the background before you even click:

const specScript = document.createElement('script');
specScript.type = 'speculationrules';
specScript.textContent = JSON.stringify({
  prerender: [{ where: { href_matches: '/*' }, eagerness: 'moderate' }]
});
document.head.appendChild(specScript);

By the time your cursor lands on a link, the next page is often already rendered. It feels instant — two browser primitives, not a framework.

The CSS bug that kept coming back

This one bit me four separate times before it clicked. Cards would overflow on mobile even though every child inside was already told to shrink. Turns out CSS Grid and Flexbox children have an implicit min-size: auto — they won't shrink below their content's intrinsic width unless you override it, and that has to happen at every level of nesting, not just the outer container:

.ts-select { min-width: 0; max-width: 100%; }
.ts-workbench > * { min-width: 0; }
.dev-row { min-width: 0; }

Fix one nested grid, ship a new tool with a nested grid three weeks later, hit the exact same overflow again. It's now a standing rule in the project: any new nested grid/flex layout gets min-width: 0 at every level, on sight, because I got tired of rediscovering the same CSS spec behavior.

Real crypto, not remembered crypto

When I added a password-hashing tool, the tempting shortcut was writing bcrypt from memory. I didn't. Hand-transcribing Blowfish S-boxes or an Argon2 mixing function from memory, in a tool whose whole job is producing correct hashes, is exactly where "roughly remember" becomes a silent bug nobody catches until it matters. Instead I vendored hash-wasm's actual WASM builds of the reference C implementations — self-contained, embedded as base64, no runtime fetch — and wrote round-trip tests (hash → verify → reject-wrong-password) before trusting it. Local-only and "don't write your own crypto" pulled in the same direction here.

Gating on-device AI without lying about it

A few tools use Chrome's built-in on-device model APIs — genuinely on-device, no server round-trip. But "on-device AI" fails in more states than "works" or "doesn't": model not downloaded, unsupported GPU, wrong browser. I wanted to avoid a dead button with a spinner.

async function checkSupport() {
  if (!('Writer' in self)) { gate('no', 'Not available in this browser'); return; }
  const avail = await Writer.availability();
  if (avail === 'unavailable') { gate('no', "This device can't run the model"); return; }
  gate('ok', avail === 'available' ? 'Ready' : 'Will download on first use');
}

The rule that came out of this: only call availability() passively on load. Never spin up a real session just to check if you can — that's what actually triggers the download, so it has to happen on a genuine click, not a background probe.

The tool I killed on principle

I built a dictation tool using the browser's built-in speech recognition API and got it fully working — live transcript, punctuation voice commands, the works. Then I pulled it before shipping. Chrome's SpeechRecognition sends your microphone audio to Google's speech-to-text servers to produce the transcript — there's no way around that with today's Web Speech API. I tried making the exception loud instead of quiet: a callout above the tool, a dedicated privacy-policy section, footer text spelling out exactly what happens. It still didn't sit right. If "nothing leaves your device" has an asterisk, it's not really the promise anymore, disclosure or not — so the tool didn't ship. Better to have 92 tools that all mean the same thing than 93 where one needs a footnote.

The full list — all 92 tools, by collection

Everything below runs at tools.tapdot.org — click any name to open it directly.

📚 Study (4)

CiteMaker — APA, MLA, Chicago, Harvard citations
FlashForge — Flashcards with spaced repetition
GradeCalc — GPA, weighted grade, final exam calculator
BiasCheck — Media bias & loaded language analyser

✍️ Write (4)

ReadScore — Flesch-Kincaid readability analysis
WordCount Pro — Word count, keyword density, live
LoremCraft — Placeholder text in 10 styles
ThreadCraft — Split long text into a tweet thread

🛠️ Dev (27)

JSONLab — Format, validate, minify, diff JSON
JSONConvert — JSON to YAML, CSV, XML, TOML
JWTStudio — Decode & inspect JWT tokens
YAMLCheck — YAML validator & formatter
CSVExplore — Sortable, filterable CSV viewer
MarkdownLive — Markdown editor with live preview
HTMLPreview — Sandboxed HTML renderer
SQLFormat — SQL formatter & beautifier
ColourContrast — WCAG AA/AAA contrast checker
UUIDGen — UUID v4/v7, ULID, nanoid generator
TimezoneNow — World clock & meeting overlap finder
TZConvert — Convert a date & time across timezones
RegexLab — Regex tester with match highlighting
CronLab — Cron expression workbench
Base64Tool — Encode and decode Base64 live — standard or URL-safe
DiffCheck — Line-by-line text comparison, fully local
WSTester — Connect and test WebSocket servers from your browser
CodePlay — HTML/CSS/JS playground with live preview and console
BigOCheck — Estimate time complexity from code structure
WorldClock — Airport-style analog world clocks, TV fullscreen
TimestampConvert — Unix timestamp <-> date, live, across timezones
JSONCSV — Convert JSON arrays to CSV and back
HashGen — SHA-1/256/384/512 hashes for text or files
KeyGen — RSA/ECDSA keypair generator, exported as PEM
PassHash — Hash and verify passwords with real bcrypt/Argon2id (WASM)
SVGClean — Strip editor cruft, comments, and excess precision from SVG markup
SQLObfuscate — Anonymize table/column names and literals in a SQL query

📣 Marketing (8)

UTMBuilder — Build UTM tracking links — history saved locally
HeadlineScore — Score headlines for clarity, emotion, and SEO
EmailSubjectTester — Spam triggers, mobile preview, sentiment
AdCopyWriter — Google, Meta and LinkedIn ad copy from a brief
SocialCalendar — Plan your content calendar — saved locally
PersonaBuilder — AI-assisted customer personas, saved locally
CompetitorMatrix — Feature comparison matrix — export CSV or Markdown
ROICalculator — ROI, ROAS, CPA, CLV and payback period

💰 Finance (11)

CompoundCalc — Compound interest with monthly contributions
BudgetPlanner — 50/30/20 budget split with a donut chart
MortgageCalc — EMI, amortisation schedule, overpayment savings
InvestmentTracker — Portfolio holdings, returns, and allocation
TaxEstimate — Income tax for India, US or UK
CurrencyConvert — 170+ currencies — rates cached daily
EquityCalc — Cap table dilution across funding rounds
NetWorthTracker — Assets minus liabilities, tracked monthly
LoanCalc — EMI, amortisation, and part-payment impact for any loan
RetireCalc — Retirement corpus needed vs on track — and the gap
InflationCalc — What inflation does to your money over time

⚖️ Legal (6)

ContractRead — Plain-English contract summary — on-device AI
NDAGenerator — Mutual or one-way NDA from a template
PrivacyPolicyGen — GDPR/CCPA-aware privacy policy generator
TermsBuilder — Terms of Service from a template
CopyrightChecker — Estimate public-domain status by jurisdiction
LegalGlossary — 130+ legal terms explained in plain English

🧑‍💼 HR (6)

SalaryBand — Pay grades, compa-ratio, range visualisation
JobDescriptionWriter — Inclusive job descriptions via on-device AI
InterviewKit — Role-specific questions and a scoring rubric
OfferLetterBuilder — Professional offer letter from a template
OnboardingChecklist — Day 1 / Week 1 / Month 1 checklist, saved locally
LeaveCalculator — Accrual, balance, and carry-forward

🩺 Health (6)

BMICalc — BMI, BMR, TDEE and healthy weight range
MedicationLog — Medications, doses and adherence rate
SymptomDiary — Log symptoms and severity on a calendar
CycleTracker — Predict next period and fertile window
WaterIntake — One-tap hydration logging and streaks
SleepLog — Sleep duration, quality and AI pattern analysis

🎨 Design (9)

SketchPad — Local whiteboard — pen, shapes, arrows, text, PNG export
PhotoTune — Local photo editor — filters, rotate, resize, export
PaletteForge — Colour palettes with CSS/Tailwind export and contrast ratios
TypographyScale — A harmonious 9-step type scale from base size and ratio
IconExplorer — A curated outline icon set — copy as SVG, JSX, or Vue
ShadowStudio — Layered CSS box shadows visually, with presets
SpacingCalc — Linear or multiplicative spacing scale, with export
GradientMaker — Linear, radial, and conic CSS gradients visually
ImageCompress — Resize and recompress images locally — JPEG/WebP/PNG

✅ Productivity (7)

UnitConvert — Every common unit converted live, with full tables
FocusTimer — Pomodoro-style focus sessions with notifications
QuickNote — A fast, private notepad that autosaves as you type
DecisionMatrix — Weigh criteria, rate options, see which wins
MeetingTimer — See the real cost of your meeting, live
HabitTracker — Daily habits with streaks and a heatmap
ReadingList — Save articles and books, track status and notes

🤖 Chrome AI (4)

AISummarize — Summarize long text on-device — TL;DR, key points, headline
AITranslate — Translate between languages on-device with auto-detection
AIWrite — Draft an email, post, or message from bullet points — on-device
AIRewrite — Change the tone or length of text — on-device

What's next

The repo's public: github.com/mohan-venkatakrishnan/tapdot-tools.

I'd genuinely like feedback on where I drew the line with the dictation tool — was killing it the right call, or is a loud, honest disclosure enough to justify keeping a tool that isn't fully local? Curious how others building free-but-honest tools have drawn that line.

And if there's some small utility you keep reaching for that always comes bundled with ads, logins, or a privacy policy you'd rather not read — tell me in the comments. If it can be done fully client-side, I'll build it.

Building Margin: A Privacy-First News Reader Inside Chrome's Side Panel

Mohan — Sun, 21 Jun 2026 18:42:21 +0000

I built a Chrome extension called Margin — a news reader that lives in
the browser's side panel and shows one bite-sized story at a time, instead of
an infinite-scroll feed. This is a build log: the decisions, the constraints
that pushed back, and a couple of things I had to solve in slightly unusual
ways.

Why the side panel

Chrome shipped chrome.sidePanel in MV3 a while back and most uses I saw were
utility tools — note-taking, translation helpers. Nobody was using it for
content consumption. News felt like a good fit: a side panel that stays open
next to whatever you're working on, where you tap through headlines in a
couple of minutes without leaving the page.

The reading model is intentionally narrow: one card, one headline, one short
summary, tap to read the full article at the source. No infinite scroll, no
algorithmic feed. If you've used InShorts, the shape will be familiar.

The stack

Preact + Vite + @crxjs/vite-plugin. Preact because the side panel is a small
UI surface and I didn't want React's weight for what's essentially a card
stack and a settings screen. @crxjs/vite-plugin handles the MV3-specific
build wiring (manifest generation, service worker loader, HMR for the
extension context) that would otherwise be a lot of manual plumbing.

The constraint that shaped onboarding

chrome.sidePanel.open() requires a user gesture. You cannot call it from
a background service worker on install — Chrome will throw. That one
constraint shaped the whole first-run experience.

My first instinct was "just auto-open the panel on install so people see it
immediately." Doesn't work. The fix ended up being two-pronged:

On chrome.runtime.onInstalled with reason === 'install', open a real browser tab with a short walkthrough (find the icon → pin it → open the panel). The button on that page calls sidePanel.open() — valid, because the click is the gesture.
The first time the panel itself is opened, show an in-panel welcome screen before onboarding, nudging the user to pin the toolbar icon for one-click access later.

chrome.runtime.onInstalled.addListener((details) => {
  if (details.reason === 'install') {
    chrome.tabs
      .create({ url: chrome.runtime.getURL('src/welcome/index.html') })
      .catch(() => {})
  }
})

Small platform detail, but it's the kind of thing that's invisible until you
hit it, and then it reshapes a whole feature.

Getting "swipe" right

The card stack supports scroll-to-advance, and the obvious naive approach —
just listen to wheel/scroll deltas — over-advances. A fast trackpad swipe can
fire a dozen scroll events, which without debouncing skips two or three cards
at once.

I went back and forth on this. My first fix added "re-acceleration"
detection — trying to distinguish a continued gesture from a new one based on
velocity changes. It technically worked but was fragile and hard to reason
about. I ended up ripping it out in favor of something much simpler: track an
idle gap between scroll events, and treat direction reversal as a new
gesture. One card per gesture, full stop. Less clever, far more predictable —
and it's the version that's actually shipped.

Lesson: when a heuristic needs increasingly special-cased logic to handle
edge cases, that's usually a sign the simpler version was right and the bug
was somewhere else.

Privacy, by removing things rather than adding them

Margin has no backend. There was never a backend to remove, which made the
privacy story straightforward instead of aspirational:

RSS feeds and article pages are fetched directly from publishers, from the user's machine.
Optional AI summaries run on-device via Chrome's built-in Summarizer (Gemini Nano) — article text never leaves the browser.
Settings, cached cards, and reading stats live in chrome.storage.local. Nothing is transmitted anywhere unless the user explicitly buys the paid tier (more on that below).

The only design wrinkle: Chrome's on-device model has an eligibility/
provisioning step, and defaulting summaries to "always on" produced errors on
devices that didn't support it yet. Fix was a tri-state preference —
auto | on | off — where "auto" silently checks device support before
turning summaries on, instead of assuming.

Monetization without becoming a backend

For the optional Plus tier, I didn't want to stand up a server just to gate
features. I used Lemon Squeezy as merchant of record: checkout happens on
their hosted page, the user gets a license key by email, and the extension
activates/validates that key against Lemon Squeezy's public License API.

const res = await fetch('https://api.lemonsqueezy.com/v1/licenses/activate', {
  method: 'POST',
  headers: { Accept: 'application/json' },
  body: new URLSearchParams({ license_key: key, instance_name: 'margin-extension' }),
})

No secret key required client-side, no server to run, and Margin never
touches payment details. The whole "Plus" gate is just: is there a valid
license key in local storage?

Where it's at

It's live on the Chrome Web Store — free tier covers 3 topics and a couple of
themes, Plus unlocks the rest. I'd genuinely like feedback on the reading
flow in particular, since "one card at a time" is a more opinionated UX
choice than a typical feed and I want to know if it actually lands for people
who try it.

Margin - Chrome Web Store

Bite-sized news in your side panel.

chromewebstore.google.com

Happy to answer questions about the side panel API, MV3 service worker
quirks, or the licensing setup — ask away.

I built a Chrome extension that shows which tab is eating your RAM (and frees it in one click)

Mohan — Thu, 18 Jun 2026 06:34:53 +0000

The problem I kept running into

I'm a chronic tab hoarder. At any given time I've got 40–80 tabs open across two windows. Chrome's built-in Memory Saver is aggressive in the wrong ways — it hibernates tabs I'm actively referencing. And the built-in task manager is a two-step detour that still doesn't tell me which tabs I should actually close.

So I built Tab Memory Manager.

What it does

Per-tab memory estimates — A live MB count next to every open tab. Sorted by memory usage by default. There's a live total on the toolbar icon so you always know what Chrome is consuming right now.

Smart suggestions — The extension flags your biggest, stalest tabs: ones that are idle the longest and consuming the most. It never suggests your active tab, pinned tabs, tabs playing audio, or domains you've whitelisted.

Hibernate, don't close — This was the core design decision. Hibernating frees the memory but keeps the tab alive in your strip — it reloads when you click it. Much safer than closing, especially mid-research.

Bulk cleanup — Select multiple tabs or hit Apply on the suggestions panel. See the total memory you'll reclaim before you commit.

Undo list — Closed something by mistake? There's a "Recently cleaned" panel. One click to restore.

Tab grouping — Groups all your open tabs by domain into color-coded Chrome tab groups, instantly.

The interesting technical bit: memory estimates

Chrome's stable extension API doesn't expose exact per-tab memory. The chrome.processes API that does exists only on Dev and Canary builds — not the Chrome that 99% of people use.

So Tab Memory Manager uses calibrated estimates based on tab state, domain patterns, and known Chrome process overhead. These are clearly labeled "est." in the UI. If you're on Dev or Canary, you can switch on real per-tab memory in settings.

The warning Chrome shows about "processes requires dev channel" is a Chrome-generated note about that optional API — the extension works completely normally without it. It's not a bug.

The privacy angle

No accounts. No servers. No analytics. No network requests at all (except to load the extension itself). Your tab data never leaves your browser.

This was a hard constraint from the start — I didn't want to build a tool that phones home with your browsing habits in exchange for memory stats.

What I learned building it

Chrome's memory API situation is messier than I expected. There's no clean "give me memory per tab" call on stable Chrome. The estimates approach took real calibration work.
Hibernation UX is tricky. Users expect the tab to stay exactly where it was. Making that feel seamless (instant reload on click, right scroll position, no flash) took more edge-case handling than the core feature.
"No frameworks" was the right call here. The extension opens in under 100 ms. That matters when you're in the middle of a task and just want to quickly free some memory.
Dark mode should be automatic, not optional. Used CSS variables throughout so dark/light adapts to the user's system preference without any user-facing toggle.

Try it

It's free on the Chrome Web Store. I'd genuinely love feedback — especially from people who've tried other tab suspenders and found them lacking.

Link:

Tab Memory Manager - Chrome Web Store

See estimated memory per tab, hibernate or close idle tabs in one click, and group tabs by domain. Everything stays on your device.

chromewebstore.google.com

What would make this more useful for your workflow?

Building Floatdeck - Chrome extension with 30+ tools and no backend

Mohan — Tue, 16 Jun 2026 18:47:12 +0000

Weekend project to scratch an itch: I had five separate extensions — screenshot, dark mode, reading mode, QR, link cleaner — each eating a toolbar slot, a couple clearly monetizing my data. So I rolled them into one draggable floating button that fans open into a radial menu of ~30 actions.
A few decisions worth noting:

No backend, no analytics, zero network calls. Everything runs locally. That constraint makes the privacy story trivially honest and removes all the server/auth/policy overhead. If a feature needed a server, it didn't make the cut. Bundle's ~50KB.
Vanilla JS, MV3, Shadow DOM. Since it injects into every page, I wanted it tiny — no framework. Shadow DOM to isolate the button from host-page CSS, which killed a whole class of style-collision bugs.
The radial menu — not sure it was right. Looks great, feels nice for 5–6 items, but past that I doubt it beats a plain list for scanability (Fitts's law hates small icons on an arc). Kept it for the aesthetic. Curious if anyone's actually measured this.

It's on the Chrome Web Store if you want to poke at it (disclosure: I'm the dev, free, no account, no telemetry). Mostly posting for the discussion though — how would you have handled the menu layout?

FloatDeck - Floating Button Menu & Quick Actions - Chrome Web Store

A draggable floating button that opens a radial menu of quick actions — screenshots, reading & dark mode, QR, copy, and more.

chromewebstore.google.com