Published on

Building Web Extensions

Chrome extensions (and browser extensions in general) are essentially small apps that live inside your browser. They don't try to replace websites or reinvent workflows, they just add minor conveniences that add up.

Why Extensions are Awesome

End users have little control over the decisions web developers make. Sometimes requested features go ignored—or conflict with business goals. That’s where extensions come in, they let users solve their own problems.

And because these extensions can be available across multiple websites you visit, they can be used to add minor conveniences that significantly compound. Think of ad-blockers or password managers.

And the best part, building them is way easier than you might think.

How Extensions Work — Simplified

At its core an extension is made of the following pieces:

  • A manifest.json file — which tells the browser what the extension does, what files it uses to do these things, what sites it can access, and what permissions it needs.

  • Some JavaScript — this is where the extension logic exists. It can interact with the DOM of web pages, make API calls, respond to user actions, and more. This logic is contained in either the content scripts and background script.

  • HTML/CSS — for popups, options pages, or UI injected into web pages.

  • Browser APIs - the special powers extensions get.

extension-breakdown

If you can build a web app, you can definitely build an extension. You can even use frameworks like Vue, Svelte or React to build out your extension, as long as the build process compiles down the output to a structure that the browser (through the manifest.json) understands.

The AI Paywall Problem

AI is amazing. It's powerful and accessible. The big companies (OpenAI, Google, Deepseek, etc.) even let us use these incredible tools for free (to an extent) through their chat interfaces. Very generous. But there’s a catch.

Outside the free chat interfaces, access to the models usually costs money. So businesses build around the paid APIs instead and we are expected to pay for something we could’ve gotten free — or even, pay twice if we already have an AI subscription.

In the world of online content summarization, this felt like a gap web extensions could easily bridge. Why not link the content to the free chat interfaces using a web extension?

Enter justTLDR

justTLDR is a Chrome extension that turns your favorite AI (ChatGPT, Claude, Gemini, Grok, Deepseek — pick your poison) into a personal research assistant.

It helps you:

  • ⏱ Summarize YouTube videos in seconds

  • 📚 Collapse long web articles into clear, to-the-point summaries (or however you want it broken down)

  • 🛠 Customize the way you summarize using your own prompts

No subscriptions. No API keys. No limits. You’re using the AI account you already have. No middlemen. No extra costs.

How? It simply copy-pastes the text from a web article or transcript from a Youtube video into your ChatGPT, Claude, Gemini, Grok or Deepseek account chat interface.

justtldr-flow

How I implemented it

  1. I kicked it off by building a simple but quick Vanilla.js web extension that captured web articles content and pasted it on ChatGPT for summarization with a preconfigured prompt.

  2. I then added support for other AIs (Claude, Gemini).

  3. The code got a bit harder to follow, so I refactored it into a React web extension built it with Vite.

  4. I added the ability to add multiple custom prompts for different summarization levels. Sometimes you want detailed summaries, sometimes you want a shorter summary.

  5. I added the ability to capture Youtube transactipts and summarize them. Capturing Youtube transcripts is a bit tricky, but I got a work-around by reverse engineering another paid extension 😅.

    I extract the transcript URL directly from YouTube's page HTML, then fetch the transcript from YouTube's internal timedtext API endpoint. This approach avoids using the official YouTube API (and its rate limits) while making everything happen client-side in the browser - no server needed.

    This request is possible because extensions can make same-origin requests on behalf of the user when granted the proper permissions.

  6. I added a few nice-to-have features, like adaptive text processing, to strategically sample content longer than AI's character limit, easily switching between AI providers, copy-to-clipboard, jump-to-section for Youtube etc.

  7. I matched the extension elements to Youtube to look like part of the Youtube UI and made the web extension button removable on demand as it can get annoying.

There are obviously more sub-features and steps this entailed, but I wanted to keep it simple and focus on the core implementation functionality.

For a more detailed explanation of the implementation, check out the detailed code documentation or review the code on github.

The extension is also currently available on Chrome Web Store. Last I checked it has over 500 users. Who knew something so simple could be so popular?

Final Thoughts

Chrome extensions are simple, but they can also be powerful, and deeply satisfying to build. For developers, they can give you an easy chance to craft tiny tools that directly improve your daily workflow.

If you haven’t built one yet, try it. Pick a small itch, scratch it and enjoy the quiet productivity boost that follows.