Chrome Extension

Chrome Extension 101

Directory structure


HelloWorld/
|- icon16.png
|- icon48.png
|- icon128.png
|- manifest.json
|- popup.html

manifest.json


{
    "manifest_version": 2,
    "name": "Hello World",
    "version": "1.0",
    "description": "A hello world extension!",
    "icons": {
        "128": "icon128.png",
        "48": "icon48.png",
        "16": "icon16.png"
    },
    "browser_action": {
        "default_icon": "icon16.png",
        "default_popup": "popup.html"
    }
}

popup.html


<!DOCTYPE html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h2 id="greet">
        Hello World!
    </h2>
</body>
</html>

Load from chrome://extensions

Load unpacked → choose directory HelloWorld/

Track List

Chrome Extension Basics

Introduction to Chrome APIs

Basic timer extension built in JS and HTML/CSS

Study Timer Extension Project

Hands on beginner project building a production grade study timer (Pomodoro) extension using JS and HTML/CSS

Data Fetching

Build a TV show search extension using new Chrome APIs

Data fetching using HTTP requests to third party APIs

Webpack Build Syste,

Design a build system that enables the use of TypeScript and React code in our extension using a single command

Weather Extension Project

Multi-featured weather extension usign React and TypeScript

Introduces Material UI components library

Integrates nearly every Chrome API learned in the course

AD Blocker Extension Project

Basic principles behind a simple ad blocker in TypeScript

Light discussion about the current state of ad blockers

Chrome Web Store Publishing

Deploy your chrome extnesion for the world to see!

Chrome Themes

Optional bonus section covering the basics of Chrome Themes

Why Build Chrome Extension

Simple and cheap to build and deploy

Great for personal projects or personal use

Transferable skills using modern web frameworks

Easily turn static web apps into extensions

Lots of flexibility to be creative

Basics

Chrome developer docs: https://developer.chrome.com/docs/extensions/

Manifest file reference: https://developer.chrome.com/docs/extensions/mv3/manifest/

Chrome extension APIs reference: https://developer.chrome.com/docs/extensions/reference/

#1 Study Timer Extension (Pomodoro Extension)

So I’ve been used Pomodoro timer extension for years. What I’d like the most is it’s reliability. Where there are web equivalent of pomodoro timer, but it’s unstable where it sometimes unresponsive when there are many tabs open. The features of immediate open up page when timer is end is very useful too. Finally, it is very easy to use by just click on the extension icon.

What I didn’t like is it lack of advance planner feature, like set what I want to focus on (working on project A, study on B, etc.) I want to add that and have history recap. Perhaps create projects list first and estimated pomdoro sessions to complete it and use pomodor timer to progress.

#2 Weather Extension

#3 AdBlock Extension

#

Building a Task Management Chrome Extension: Key Features and Design Tips

Outline the essential features of a task management extension, including task organization, reminders, and UI considerations for productivity.