FREE PRACTICAL AI LEARNING · LEARN BY DOINGNO SIGNUP NEEDED · YOUR WORK STAYS YOURS
Open PracticePRACTICAL AI ENGINEERING
FREE TOOL · BUILD APPS

Build your first Chrome extension

Extensions are small web apps that live in the browser toolbar. You will pick a pattern, generate a working Manifest V3 extension, read every file, load it in Chrome yourself and change one behaviour — the fastest way to understand how extensions work.

⏱ 20–40 min · Download a ZIP · Deploy free · No signup

You will practise

  • How manifest.json, popup and permissions fit together
  • Loading an unpacked extension for testing
  • Asking for the minimum permissions

No AI key needed. The code comes from a reviewed template.

  1. 1Brief

    Answer a few questions. The generator writes the code; you will read and change it.

    page-notes: keep a note per website · focus-timer: notify after N minutes · word-counter: count words on a page · link-collector: list and copy all links
    what the extension does for the user in one sentence

  2. 2Make

    Generate the project, then open every file. Comments explain each part. You can edit files right here.

  3. 3Check

    Automatic checks for the mistakes that break real projects: invalid config, leaked keys, missing security steps.

    • 4Improve

      1. Run the check first.
      Your change: Change one behaviour yourself: e.g. in page-notes, make the status say “Saved at 14:32” with the current time. Reload the extension and test.

    • 5Ship

      Load it unpacked in Chrome or Edge (steps in README.md). Publishing to the Chrome Web Store needs a developer account with a one-time fee; sharing the ZIP with friends is free. Step-by-step instructions are inside README.md.

    Questions people ask

    Do I need to know JavaScript?

    No to start. The generated code is short and commented; reading it and making one small change is the lesson.

    What is Manifest V3?

    The current format Chrome requires for extensions. It forbids remote code and encourages minimal permissions.

    Do I need an AI key to use this?

    No. The guided template teaches the same skill with no AI at all. If you add your own free key (Groq, Google Gemini, OpenRouter, Mistral or Cerebras), the tool can also draft and revise. The key stays in your browser and requests go straight to that provider.

    Where is my work saved?

    In this browser only (local storage), until you copy or download it. Nothing you type is sent to Open Practice.

    Keep building

    Build appsPWA Mobile App CreatorMake an installable phone app that works offlineBuild appsWebsite GeneratorGenerate and publish a one-page website for freeDeveloperJSON Formatter & ValidatorFormat, validate and fix JSONACADEMY COURSEFrom idea to working pageGo deeper: a full project course with fixtures, a capstone and a handbook.