diff --git a/manifest.json b/manifest.json
index e74fdee..926c85f 100644
--- a/manifest.json
+++ b/manifest.json
@@ -6,5 +6,6 @@
"permissions": ["storage"],
"host_permissions": ["https://www.googleapis.com/youtube/v3/*"],
"background": { "service_worker": "src/background.js", "type": "module" },
- "action": { "default_title": "Outlier Saver" }
+ "action": { "default_title": "Outlier Saver" },
+ "options_ui": { "page": "src/options/options.html", "open_in_tab": true }
}
diff --git a/src/options/options.css b/src/options/options.css
new file mode 100644
index 0000000..641cf90
--- /dev/null
+++ b/src/options/options.css
@@ -0,0 +1,16 @@
+:root {
+ color-scheme: light dark;
+ --line: color-mix(in srgb, currentColor 20%, transparent);
+ --muted: color-mix(in srgb, currentColor 60%, transparent);
+}
+body { margin: 0; font: 15px/1.5 system-ui, sans-serif; }
+main { max-width: 520px; margin: 0 auto; padding: 24px 16px; }
+h1 { font-size: 20px; margin: 0 0 16px; }
+form { display: grid; gap: 16px; }
+label { display: grid; gap: 4px; font-weight: 600; }
+input { padding: 8px 10px; font: inherit; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: inherit; }
+.actions { display: flex; align-items: center; gap: 12px; }
+button { padding: 8px 16px; font: inherit; border: 0; border-radius: 6px; background: #1a73e8; color: #fff; cursor: pointer; }
+#saved { color: var(--muted); }
+details { margin-top: 24px; color: var(--muted); }
+summary { cursor: pointer; }
diff --git a/src/options/options.html b/src/options/options.html
new file mode 100644
index 0000000..43d4850
--- /dev/null
+++ b/src/options/options.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+ Outlier Saver — настройки
+
+
+
+
+ Outlier Saver
+
+
+ Как получить API-ключ
+
+ Откройте Google Cloud Console и создайте проект.
+ В разделе «API и сервисы → Библиотека» включите YouTube Data API v3 .
+ В «Учётные данные» создайте API-ключ .
+ В ограничениях ключа выберите «Ограничить API → YouTube Data API v3». Ограничение по HTTP-источникам (referrer) не включайте : запросы идут из расширения.
+ Вставьте ключ в поле выше и нажмите «Сохранить».
+
+
+
+
+
+
diff --git a/src/options/options.js b/src/options/options.js
new file mode 100644
index 0000000..442c446
--- /dev/null
+++ b/src/options/options.js
@@ -0,0 +1,24 @@
+import { getSettings, saveSettings } from '../lib/storage.js';
+
+const form = document.getElementById('form');
+const apiKey = document.getElementById('apiKey');
+const threshold = document.getElementById('threshold');
+const minViews = document.getElementById('minViews');
+const savedLabel = document.getElementById('saved');
+
+function fill(settings) {
+ apiKey.value = settings.apiKey;
+ threshold.value = settings.threshold;
+ minViews.value = settings.minViews;
+}
+
+fill(await getSettings());
+
+form.addEventListener('submit', async (event) => {
+ event.preventDefault();
+ fill(await saveSettings({ apiKey: apiKey.value, threshold: threshold.value, minViews: minViews.value }));
+ savedLabel.textContent = 'Сохранено';
+ setTimeout(() => {
+ savedLabel.textContent = '';
+ }, 2000);
+});