React & TypeScript Chrome Extension Development

Learn to load your Chrome extension, build a popup and options page with JavaScript, HTML, and CSS, and explore APIs like background scripts, storage, and alarms through a timer extension.

Explore how the manifest file defines a chrome extension with a json format, including manifest_version 3, name, version, description, icons, and loading an unpacked extension.

Add an options page to the Chrome extension, update the manifest, create options.html, CSS, and JS, then build interactive inputs and a save button with a console log for feedback.

Implement a timer in a Chrome extension using a background service worker from the manifest background field; timer runs with setInterval in the background, wakes on events, and may sleep.

Master the Chrome Alarms API to run a one-second timer in the background, store time locally, and update the badge and popup in sync.

Learn to trigger desktop notifications in a Chrome extension via the Chrome notifications API using a service worker, with manifest permissions and a configurable timer.

Implement a start, stop, and reset timer in the Chrome extension popup using three buttons, local storage for isRunning, and a background script to control timer logic.

Explore Chrome DevTools for debugging Chrome extensions across background scripts and the service worker, popups, and options pages, using selected context only, console interactions, and live DOM/CSS edits.

Build a fully featured chrome extension using html, css, and javascript with storage and notification APIs, a pomodoro timer, tasks, and default time customization for publishing to the Chrome Store.

Create a manifest v3 chrome extension for a Pomodoro timer, add icons, and build a popup UI with HTML, CSS, and JavaScript featuring timer, start, and add task functions.

Create render and render-tasks functions to display, delete, and rerender tasks. Persist the task array with chrome storage sync and load on popup open.

Implement a pomodoro timer in a chrome extension by adding a background service worker with alarms and notifications, store timer state locally, and provide start, pause, and reset controls.

Implement a countdown timer in the popup that updates every second, counts down from 25 minutes with padded seconds, persists via storage, and notifies when it ends.

Create an options page to customize the Pomodoro timer, using a number input (1–60, default 25) and save options. Store settings locally and update popup and background timer accordingly.

Style the Chrome extension popup by adjusting dimensions, colors, and typography using CSS; apply margins, padding, flex containers, and button styling to create a polished interface.

Style the extension's popup and options page by implementing input and delete button classes, adjusting borders, padding, width, and colors to create a usable Chrome extension UI.

Enable a context menu search that uses Chrome search query on the selected text to open results in a new tab using the Tabs API.

Master data fetching and HTTP requests by using the Fetch API to request JSON, store results in Chrome storage, and render them in the extension popup.

Learn to set up a TypeScript, React, and Webpack build system for Chrome extensions, enabling a single build command with minimal manual configuration.

Install git and npm, verify versions, and use VS Code's integrated terminal. Initialize a React extension project with npm init, git init, a package.json, and prettier configuration.

Bundle your react and typescript code into a single javascript file for a chrome extension by configuring webpack with ts-loader, an entry point, and outputting to dist/index.js.

Learn how to bundle a chrome extension with webpack by copying static files like the manifest into the distribution folder and wiring up a popup with html-webpack-plugin and multiple chunks.

Learn how to wire a webpack plugin in a React Chrome extension, fix development errors with devtool, render React with ReactDOM into a dedicated root container, and manage distribution folder.

Extend webpack config to handle chrome extension icons, move assets to a static folder, update the manifest, and set up an options page with shared modules via split chunks.

Learn to set up Chrome extension scripts with manifest, background and content scripts, and webpack, then add definitively typed type libraries for Chrome, React, and react-dom to enable type-safe messaging.

Walks through a regularly updated production boilerplate for a React Chrome extension, guiding initial setup, git, package.json and manifest customization, development and production builds, and asset handling.

Build a weather extension using TypeScript, React, and Webpack to fetch data from a weather API. Create a popup, options, background, and content scripts with Chrome APIs and Material UI.

Create a React and TypeScript weather chrome extension that fetches current weather by city name from OpenWeatherMap using an api key and a json response, with a utilities fetch function.

Fetch weather data in a React component using useEffect with a hardcoded Toronto city, log results and errors, and define a TypeScript interface to type the response for metric units.

Build a chrome extension popup UI with React and Material UI, featuring a weather card per city that fetches data from the Open Weather API using useEffect.

Enhance a weather card using Material UI components like Card, CardContent, and Typography, fetch and display data with useState, round temperatures, and use Box for spacing.

Create a resilient weather card by managing loading, error, and ready states, and build a weather card container with a reusable children prop for consistent styling, using Roboto font.

Enhance the popup by managing a cities array with useState, mapping to weather cards, and adding a top input with a plus button to add cities.

Create a storage.ts module to manage cities in local storage via a TypeScript interface, with set and get functions that wrap chrome.storage.local in promises.

Add a metric or imperial temperature toggle to the weather extension by introducing an open weather temp scale type and options field, and update local storage with set/get stored options.

Implement a temperature scale toggle in a React and TypeScript extension by adding an icon button, updating local storage options, and passing the scale to fetch calls and weather cards.

Builds a React and TypeScript options page with a text field and save button, using storage hooks, state, and a delayed save with disabled fields for feedback.

Turn the content script into a tsx React component to display a weather card overlay on pages, then fix its position with an overlay card and CSS.

Add a toggle button to reopen the overlay via messages, define a messages enum, and implement a content script listener with a use effect to toggle the overlay on the active tab.

Implement a context menu to add a highlighted city to the weather extension and update stored cities in the background, plus display the home city temperature on the Chrome badge.

Learn the basics of building a basic AdBlock extension, focusing on background and content scripts, and how webrequest and declarative net request APIs filter ads under manifest version 3.

Explore the Chrome Web Request API to observe and block ad requests in flight using the on before request phase and a blocking listener in a simple ad blocker extension.

Use the web request API to block ad requests by URL with a simple filters array, replacing host permissions, and explore easylist updates via open-source blockers like uBlock Origin.

Explore manifest v3 declarative net request for ad blocking: configure rules in a json file, enable declarative net request, and block requests by url substring and resource type.

Block ads using a content script and dom manipulation in a Chrome extension, with manifest v3 and site-specific rules that run only on specific URLs, deleting or hiding ad elements.

Build a production version, zip the distribution folder, and upload to the chrome web store developer dashboard; complete the store listing with description, assets, and privacy justification.

Launch the easy clipboard chrome extension, boost installs with a polished user interface and promotional images, and track daily installs, impressions, demographics, and region in the developer dashboard.

Finish the course by celebrating your success, share feedback to help the instructor improve, and look forward to building cool Chrome extensions with React and TypeScript.

Construct a Chrome theme using a manifest.json, load it as an unpacked extension, apply a watermelons image, and understand how to reset to default when needed.

Add a watermelon image to a Chrome theme by using the manifest's themes images object to set the new tab page background, adjust its alignment and repeat.

Configure Chrome extension themes by using the colors field with RGB values for frame and toolbar, plus the tints field with hue, saturation, and lightness.