Personal Browser Extension — Starter Notes

Short checklist to get started

• Language: JavaScript (simple) or TypeScript (recommended)
• Create project folder and manifest.json (use Manifest V3)
• Add a content script to alter/remove DOM elements
• Keep host_permissions minimal (only the sites you need)
• Load unpacked/temporary extension in your browser to test
• Optionally add a build step (esbuild/webpack/rollup) for TypeScript

Basics of creating an extension (very short)

1. Manifest: declare name, version, permissions, content scripts, and background/service worker.
2. Content scripts: small JS files injected into pages to find and change DOM elements.
3. Background/service worker: run persistent logic and coordinate message passing.
4. Messaging: use chrome.runtime.sendMessage / browser.runtime.sendMessage to communicate between content scripts and background.
5. UI (optional): add a popup/options page for toggles or settings.
6. Test: load the extension unpacked in Chrome/Edge or as a temporary add-on in Firefox.
7. Security: avoid eval, sanitize any inputs, and request only necessary host permissions.

Building and Running:

• npm run build
• Save and download in Chrome Extentions Manager