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-ключ +
    +
  1. Откройте Google Cloud Console и создайте проект.
  2. +
  3. В разделе «API и сервисы → Библиотека» включите YouTube Data API v3.
  4. +
  5. В «Учётные данные» создайте API-ключ.
  6. +
  7. В ограничениях ключа выберите «Ограничить API → YouTube Data API v3». Ограничение по HTTP-источникам (referrer) не включайте: запросы идут из расширения.
  8. +
  9. Вставьте ключ в поле выше и нажмите «Сохранить».
  10. +
+
+
+ + + 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); +});