feat(extension): scaffold Manifest v3 browser extension
This commit is contained in:
Paul Huliganga
parent
9f49223df3
commit
97e55ab6c2
2
TODO.md
2
TODO.md
|
|
@ -42,7 +42,7 @@ MVP is functionally complete (core app + docs + tests).
|
||||||
- [x] Add logging/telemetry for import success/failure reasons
|
- [x] Add logging/telemetry for import success/failure reasons
|
||||||
|
|
||||||
### Phase 4: Browser Extension (after URL import stable)
|
### 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 “Send to Recipe Manager” action to call import API
|
||||||
- [ ] Add extension settings for Recipe Manager base URL
|
- [ ] Add extension settings for Recipe Manager base URL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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.
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const openOptionsButton = document.getElementById('open-options');
|
||||||
|
|
||||||
|
openOptionsButton?.addEventListener('click', () => {
|
||||||
|
chrome.runtime.openOptionsPage();
|
||||||
|
});
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue