From 97e55ab6c29d82da2360c7caa72b028c7780e0e4 Mon Sep 17 00:00:00 2001 From: Paul Huliganga Date: Wed, 25 Mar 2026 00:22:33 -0400 Subject: [PATCH] feat(extension): scaffold Manifest v3 browser extension --- TODO.md | 2 +- browser-extension/README.md | 20 ++++++++++++++++++++ browser-extension/background.js | 16 ++++++++++++++++ browser-extension/manifest.json | 17 +++++++++++++++++ browser-extension/options.html | 15 +++++++++++++++ browser-extension/popup.html | 17 +++++++++++++++++ browser-extension/popup.js | 5 +++++ browser-extension/styles.css | 28 ++++++++++++++++++++++++++++ 8 files changed, 119 insertions(+), 1 deletion(-) create mode 100644 browser-extension/README.md create mode 100644 browser-extension/background.js create mode 100644 browser-extension/manifest.json create mode 100644 browser-extension/options.html create mode 100644 browser-extension/popup.html create mode 100644 browser-extension/popup.js create mode 100644 browser-extension/styles.css diff --git a/TODO.md b/TODO.md index d81d3ee..56aa24c 100644 --- a/TODO.md +++ b/TODO.md @@ -42,7 +42,7 @@ MVP is functionally complete (core app + docs + tests). - [x] Add logging/telemetry for import success/failure reasons ### Phase 4: Browser Extension (after URL import stable) -- [ ] Scaffold browser extension project (Manifest v3) +- [x] Scaffold browser extension project (Manifest v3) - [ ] Add “Send to Recipe Manager” action to call import API - [ ] Add extension settings for Recipe Manager base URL diff --git a/browser-extension/README.md b/browser-extension/README.md new file mode 100644 index 0000000..896da5d --- /dev/null +++ b/browser-extension/README.md @@ -0,0 +1,20 @@ +# Browser Extension (Manifest v3) Scaffold + +This folder contains the initial Manifest v3 scaffold for the Recipe Manager browser extension. + +## Files + +- `manifest.json` — extension manifest +- `background.js` — service worker and context menu registration +- `popup.html` / `popup.js` — basic action popup +- `options.html` — placeholder settings page +- `styles.css` — shared minimal styles + +## Load locally (Chrome) + +1. Open `chrome://extensions` +2. Enable **Developer mode** +3. Click **Load unpacked** +4. Select this folder: `browser-extension/` + +Future tasks will wire the context menu action to the import API and implement settings persistence for base URL. diff --git a/browser-extension/background.js b/browser-extension/background.js new file mode 100644 index 0000000..472f562 --- /dev/null +++ b/browser-extension/background.js @@ -0,0 +1,16 @@ +chrome.runtime.onInstalled.addListener(() => { + chrome.contextMenus.create({ + id: 'send-to-recipe-manager', + title: 'Send to Recipe Manager', + contexts: ['page'] + }); +}); + +chrome.contextMenus.onClicked.addListener((info, tab) => { + if (info.menuItemId !== 'send-to-recipe-manager' || !tab?.url) { + return; + } + + // Placeholder for task: "Add 'Send to Recipe Manager' action to call import API" + console.info('[Recipe Manager Extension] Context menu clicked for URL:', tab.url); +}); diff --git a/browser-extension/manifest.json b/browser-extension/manifest.json new file mode 100644 index 0000000..b2b5110 --- /dev/null +++ b/browser-extension/manifest.json @@ -0,0 +1,17 @@ +{ + "manifest_version": 3, + "name": "Recipe Manager Import", + "version": "0.1.0", + "description": "Send recipe page URLs to Recipe Manager for import.", + "permissions": ["storage", "contextMenus"], + "host_permissions": ["http://*/*", "https://*/*"], + "background": { + "service_worker": "background.js", + "type": "module" + }, + "action": { + "default_title": "Recipe Manager", + "default_popup": "popup.html" + }, + "options_page": "options.html" +} diff --git a/browser-extension/options.html b/browser-extension/options.html new file mode 100644 index 0000000..869a4af --- /dev/null +++ b/browser-extension/options.html @@ -0,0 +1,15 @@ + + + + + + Recipe Manager Settings + + + +
+

Recipe Manager Settings

+

Settings UI scaffold. Base URL wiring is a follow-up task.

+
+ + diff --git a/browser-extension/popup.html b/browser-extension/popup.html new file mode 100644 index 0000000..c9eb730 --- /dev/null +++ b/browser-extension/popup.html @@ -0,0 +1,17 @@ + + + + + + Recipe Manager + + + +
+

Recipe Manager

+

Extension scaffold ready.

+ +
+ + + diff --git a/browser-extension/popup.js b/browser-extension/popup.js new file mode 100644 index 0000000..7656618 --- /dev/null +++ b/browser-extension/popup.js @@ -0,0 +1,5 @@ +const openOptionsButton = document.getElementById('open-options'); + +openOptionsButton?.addEventListener('click', () => { + chrome.runtime.openOptionsPage(); +}); diff --git a/browser-extension/styles.css b/browser-extension/styles.css new file mode 100644 index 0000000..af53e14 --- /dev/null +++ b/browser-extension/styles.css @@ -0,0 +1,28 @@ +body { + margin: 0; + min-width: 280px; + font-family: Arial, sans-serif; + color: #1f2937; +} + +main { + padding: 16px; +} + +h1 { + font-size: 16px; + margin: 0 0 8px; +} + +p { + margin: 0 0 12px; + font-size: 13px; +} + +button { + border: 1px solid #d1d5db; + border-radius: 6px; + padding: 8px 10px; + background: #f9fafb; + cursor: pointer; +}