Member-only story
Simple CRUD Chrome Extension with TypeScript
3 min readOct 28, 2024
In this guide, we’ll create a Chrome extension using TypeScript for managing items with Create, Read, Update, and Delete (CRUD) functionality, enhanced by CSS for a clean, modern look.
Overview
The extension allows users to:
- Add items to a list.
- Edit existing items.
- Delete items.
- Store items persistently in Chrome storage.
Project Structure
Set up the following structure:
CRUDChromeExtension/
├── manifest.json
├── src/
├── popup.ts
├── popup.html
├── styles.css
Step 1: Configuring manifest.json
Your manifest.json should contain the following settings:
{
"manifest_version": 3,
"name": "CRUD Extension",
"version": "1.0",
"permissions": ["storage"],
"action": {
"default_popup": "src/popup.html",
"default_icon": "src/icon.png"
}
}Step 2: HTML Layout (popup.html)
The HTML layout defines the user interface:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CRUD Extension</title>
<link…
