chrome_extension_crud_v3.md

// manifest.json { "manifest_version": 3, "name": "Simple CRUD System", "version": "1.0", "permissions": [ "storage" ], "background": { "service_worker": "background.js" }, "action": { "default_popup": "index.html" } }

// index.html

<title>Simple CRUD System</title>

Simple CRUD System

Add

<script src="popup.js"></script>

// popup.js const addItemBtn = document.getElementById("add-item"); const itemInput = document.getElementById("item"); const itemsList = document.getElementById("items");

addItemBtn.addEventListener("click", function(e) { e.preventDefault(); let item = itemInput.value; if (!item) return; chrome.storage.sync.get("items", function(data) { let items = data.items || []; items.push(item); chrome.storage.sync.set({ items: items }, function() { itemInput.value = ""; renderItems(); }); }); });

function renderItems() { chrome.storage.sync.get("items", function(data) { let items = data.items || []; itemsList.innerHTML = ""; items.forEach(function(item) { let li = document.createElement("li"); li.textContent = item; itemsList.appendChild(li); }); }); }

renderItems();

// background.js

// nothing for now