标签：#chromeextension

I thought I had a settings bug. What I actually had was three different kinds of state pretending to be one boolean. While building a Chrome Manifest V3 email-tracker blocker, I expected a simple flow: you flip Gmail on in the settings, and the extension starts working in Gmail. That was the theory, anyway. The problem showed up when I was testing on a second Chrome profile. I'd enabled Gmail on my main profile, and Chrome Sync helpfully carried that preference over to the other one. But the optional permission for mail.google.com didn't come along — host grants live in the local profile and never sync. Profile number two now believed Gmail was enabled while lacking the host grant needed to inject the inbox content script or inspect its DOM. Depending on how you write your code, that's either a silent no-op or an extension quietly behaving as if access exists when it does not. Neither is great. Once I stopped and wrote it down, the picture got clearer. There are three separate things here: the inbox the user wants enabled, the host access Chrome has actually granted in this profile, and the dynamic DNR rules that are currently installed . Collapsing them into one flag is convenient. It's also wrong. The manifest is a menu, not an order The extension declares each webmail origin under optional_host_permissions . Every inbox gets activated on its own, and Chrome only asks the user for access when they turn that particular integration on. Here's the thing I had to internalize: declaring an optional origin means nothing by itself. Until the live grant exists, the extension has no business registering a content script for that inbox, poking at its DOM, or — by its own scoping policy — activating client-scoped blocking rules for it. Why bother with per-inbox prompts at all? Mostly trust. A tracker blocker that asks for all your webmail up front looks exactly like the thing it's supposed to protect you from. Asking for Gmail when you enable Gmail — and nothing more — is an

This article was originally published on e-shikumi-labo . Hello, I'm Shin from e-Shikumi-Labo. How do you all manage your conversations with Gemini? When you manage to extract a useful response from the AI, have you ever thought, "I want to keep this somewhere"? It all started from a simple, practical desire in my daily work: "I want to automatically save useful conversations from Gemini to a spreadsheet before they fade away." So, borrowing the power of Generative AI (Gemini), I tried making my own personal Chrome extension. Over this four-part series, I will write about "systematized thinking"—the process of utilizing AI to build tools and independently maintaining them. In Part 1, I'll share the developmental dialogue process: "How did I instruct the AI, what information did I provide, and how did we complete the prototype?" 1. A Prompt That Says: "Don't Guess, Ask for the Information You Need" As the very first step in development, I threw this prompt directly at Gemini itself. "I want to save Gemini's responses to a spreadsheet using a Chrome extension. Tell me how to build it without using your imagination. If you need any specific information, please point it out." The key here lies in two constraints: "without using your imagination" and "point out if you need information." When you try to build a web data extraction tool using AI, the AI often tends to "guess" the internal structure of the webpage (like HTML tags and class names) on its own and write the code. And even when you test this supposedly completed code, you fall into the trap of it not working because it doesn't align with the actual screen structure. To avoid this trap, I explicitly communicated, "Don't guess on your own. If there's missing information, I want you to demand it from the human side." 2. A Game of Catch with AI Using DevTools When I threw this prompt, the AI returned the following response: AI: "Understood. To create code that works reliably while eliminating guesswork, please retr

This article was originally published on e-shikumi-labo . Hello, I'm Shin from e-Shikumi-Labo. This is the final installment (Part 4) of "Systematized Thinking," where we use AI to build our own tools and independently maintain them. So far, we have discussed creating a prototype that automatically saves Gemini chat logs, converting them to Markdown for Obsidian integration, and elevating it to a safe, fully automated system. In this final installment, we will cover the "countermeasures for downtime due to screen specification changes," an unavoidable issue when operating tools that handle web data, and the core of the "self-reliance" humans should possess in the AI era. 1. The Web Data Extraction Compromise: "You Can't Extract What Isn't on the Screen" During development, there was a time when I thought, "I also want to record the exact date and time (timestamp) when the chat was sent." However, no matter how much I analyzed Gemini's screen structure, the exact timestamp of each utterance did not exist in the HTML. The fundamental rule of web data extraction is: "You cannot extract data that does not exist on the browser screen." As long as you are extracting data from the screen (DOM) rather than via an API, forcing the extraction of something that isn't there will require complex guesswork processes and will instead become a cause of trouble. Understanding this "technical limit," gracefully giving up on what cannot be done, and judging to maintain simplicity is also an important element of tool building. 2. Specification Changes Are Not Defects, But "Fate" As long as you deal with tools that extract data from other people's websites, the time will inevitably come when the tool suddenly stops working one day due to design changes or updates on Google's side. "It was working fine until yesterday, but suddenly it stopped saving." This is not a defect in the tool, but an unavoidable "fate" as long as you depend on someone else's platform. The important thing is not t

This article was originally published on e-shikumi-labo . Hello, I'm Shin from e-Shikumi-Labo. This is Part 3 of "Systematized Thinking," where we use AI to build our own tools and independently maintain them. Last time, I talked about creating a system to automatically output Markdown (.md) files to Google Drive simultaneously with appending to a spreadsheet. With list management in a spreadsheet and a comfortable viewing environment in Obsidian established, it was getting very close to completion as a tool. However, as I continued to use it practically, new challenges emerged on the operational front. This time, I will share the risks I faced while transitioning from a "manual button" to "full automation," and the process of evolving into safe code. 1. I Want to Eliminate the "Hassle of Pressing a Button" During the prototype stage, the system was designed so that logs were saved by pressing a button placed on the screen. However, as long as a human operates it manually, there are inevitably limitations. If you are concentrating on the conversation, you might forget to press the save button and close the screen. If the conversation gets long, you might miss past utterances that are no longer displayed on the screen. "If I have the screen open and am conversing, I want it to automatically save in the background without bothering human hands." Thinking this, I asked the AI to write the code for full automation. 2. The Code the AI Produced: "Patrolling the Screen Every 1.5 Seconds" When I consulted the AI, it immediately presented code for full automation. The mechanism was, "Start a timer every 1.5 seconds, check the entire screen in the background, and send any new utterances." When I actually tried it, the logs accumulated automatically as soon as I conversed without pressing the button, and at first glance, it looked like exceptionally well-done full automation. However, I felt something was slightly off regarding this "monitoring on a 1.5-second cycle." 3. The B

Most "save this for later" tools I've used eventually want a server: an account system, a database for your notes, a sync service with its own outage history. I wanted something narrower — capture text or a whole page while browsing, turn it into a spaced-repetition flashcard, and have it show up on my other machine — without running any infrastructure at all. MindStack is a Manifest V3 Chrome extension that does exactly that: capture, spaced-repetition scheduling, a full dashboard, and cross-device sync, built entirely on chrome.storage.sync and chrome.identity . No backend, no bundler, no npm install before you can load it unpacked. Here's what that constraint forces you to get right. Decision 1: The scheduler is SM-2-shaped, not SM-2 Spaced repetition apps usually reach for a full SuperMemo SM-2 implementation — ease factors computed from response quality on a 0–5 scale, per-review interval history. MindStack's actual scheduler is a compressed version that captures the two properties that matter for a lightweight capture tool and drops the rest: const scoreReview = async ( score ) => { const memory = state . memories . find (( item ) => item . id === activeReviewId ); const interval = { forgot : 1 , hard : Math . max ( 1 , Math . round (( memory . reviewCount || 1 ) * 1.5 )), good : Math . max ( 2 , Math . round (( memory . reviewCount || 1 ) * ( memory . ease || 2.5 ))), easy : Math . max ( 4 , Math . round (( memory . reviewCount || 1 ) * (( memory . ease || 2.5 ) + 1 ))) }[ score ]; const updated = { ... memory , reviewCount : ( memory . reviewCount || 0 ) + 1 , successCount : ( memory . successCount || 0 ) + ( score === " forgot " ? 0 : 1 ), ease : Math . min ( 3.4 , Math . max ( 1.3 , ( memory . ease || 2.5 ) + ({ forgot : - 0.35 , hard : - 0.12 , good : 0.05 , easy : 0.16 }[ score ]) )), nextReviewAt : addDays ( interval ), }; Two properties, deliberately preserved from SM-2: intervals grow multiplicatively with review count (so a card you keep getting righ

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 Problem Nobody Talks About Picture this: You're trying to find a place to meet up with friends. Someone suggests a coffee shop. It's 8 minutes from their house. It's 45 minutes from yours. You say yes anyway, because suggesting a different place feels awkward. This happens all the time — with friends, with remote teams, with family scattered across a city. And the worst part? Most "meet in the middle" suggestions aren't actually in the middle. They're just the geographic midpoint, which completely ignores traffic, transit options, and the fact that roads don't go in straight lines. I got frustrated enough to build something about it. Meet Meetle Meetle is a free web app that finds the fairest meeting spot for any group of people — based on real travel times , not just distance. A Chrome Extension is coming soon so you'll have it one click away in your toolbar. You add everyone's starting location, choose how each person is traveling (driving, walking, or transit), hit Find Meeting Point , and Meetle does the math across every person simultaneously. It then surfaces the best nearby cafés, restaurants, parks, gyms, or whatever venue type you're looking for — ranked by actual fairness. No more "it's fine, I don't mind the drive." Now you have data. How It Actually Works Under the hood, Meetle uses three Google Maps APIs working together: Distance Matrix API calculates travel time from every person's location to every candidate venue, simultaneously. This is the core of the fairness scoring — you can't rank venues fairly without knowing everyone's actual travel time to each one. Places API finds candidate venues near the calculated center point. You can filter by type (coffee, food, parks, gyms, etc.), price level, minimum rating, and whether they're open right now. Maps JavaScript API renders everything visually — the map, the travel zones (isochrones), and the markers for each suggested venue. The scoring works two ways and you can toggle between them: Fairness mo

Hey tech family! 👋 If you’ve noticed your favorite Chrome extensions acting a bit differently lately or if you're a developer currently sweating over a massive codebase rewrite you are experiencing the era of Manifest V3 (MV3) . 🤖 Google has officially pushed the web ecosystem forward by deprecating Manifest V2, making MV3 the absolute standard for how browser extensions behave. But why is this happening, what actually changed, and why is the internet so divided over it? Let’s break it all down in plain English! 👇 🧐 What Exactly is Manifest V3? Think of a "Manifest" as the blueprint file ( manifest.json ) that tells the browser exactly what an extension is, what files it uses, and what permissions it needs to run. Manifest V3 is Google's major architectural overhaul of this system. Its core mission sounds great on paper: improve user privacy, beef up security, and boost browser performance . However, achieving those goals meant rewriting the core rules of how extensions interact with your browser. 🛠️ The Biggest Changes & New Features MV3 isn't just a small patch; it fundamentally alters the underlying extension engine. Here are the headline shifts: Goodbye Background Pages, Hello Service Workers! 💤 In MV2, extensions used hidden, persistent background pages that ran 24/7, hogging your computer's RAM even when you weren't using them. MV3 replaces these with Service Workers. They are event-driven meaning they wake up, execute a task (like clicking an extension icon), and go right back to sleep. Hello, free RAM! 🐏 The Ad-Blocker Shakeup: webRequest vs. declarativeNetRequest 🛑 This is the most controversial change. In MV2, powerful extensions like uBlock Origin used the webRequest API to intercept, read, and block network requests in real-time using complex code. MV3 replaces the blocking version of this with declarativeNetRequest . Instead of letting the extension intercept the data, the extension must now hand Chrome a pre-defined list of rules, and Chrome does the b