paulh
/
recipe-manager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(extension): scaffold Manifest v3 browser extension

This commit is contained in:
Paul Huliganga 2026-03-25 00:22:33 -04:00
parent 9f49223df3
commit 97e55ab6c2
8 changed files with 119 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
TODO.md
View File

@ -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

20
browser-extension/README.md Normal file
View File

@ -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.

16
browser-extension/background.js Normal file
View File

@ -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);
});

17
browser-extension/manifest.json Normal file
View File

@ -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"
}

15
browser-extension/options.html Normal file
View File

@ -0,0 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Recipe Manager Settings</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<h1>Recipe Manager Settings</h1>
<p>Settings UI scaffold. Base URL wiring is a follow-up task.</p>
</main>
</body>
</html>

17
browser-extension/popup.html Normal file
View File

@ -0,0 +1,17 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Recipe Manager</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<h1>Recipe Manager</h1>
<p>Extension scaffold ready.</p>
<button id="open-options" type="button">Open Settings</button>
</main>
<script type="module" src="popup.js"></script>
</body>
</html>

5
browser-extension/popup.js Normal file
View File

@ -0,0 +1,5 @@
const openOptionsButton = document.getElementById('open-options');
openOptionsButton?.addEventListener('click', () => {
chrome.runtime.openOptionsPage();
});

28
browser-extension/styles.css Normal file
View File

@ -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;
}