Add Safari extension support

Author: ynot0083

.env.example

@@ -3,12 +3,15 @@
 # code; non-prefixed vars are silently ignored.
 
 # ---------------------------------------------------------------------------
-# REQUIRED — build fails fast if missing.
+# OPTIONAL — only needed for reverse proxy video mode and zen music.
 #
 # Macify CDN base URL. Single host that serves both:
 #   - GET <BASE>/itunes-assets/...     → reverse proxy to sylvan.apple.com
 #   - GET <BASE>/music/musicNNNNN.mp3  → R2 bucket of zen-mode music
 #
+# Leave this unset for the Safari self-use build. The extension defaults to
+# direct Apple streaming from https://sylvan.apple.com with no local videos.
+#
 # Set up: deploy cloudflare-worker/worker.js to a Worker route on
 #   <BASE>/itunes-assets/*, and bind your music R2 bucket to <BASE>.
 # No trailing slash.

.gitignore

@@ -11,6 +11,9 @@ dist/
 releases/
 *.zip
 
+# Generated by `xcrun safari-web-extension-packager`; contains local signing settings.
+Macify - Gorgeous Aerial Videos as Your New Tab/
+
 # Private AI context (per-machine, not for the public repo)
 local-context.md
 CLAUDE.md

README.md

@@ -1,19 +1,19 @@
-# Macify — macOS Aerial Screensavers in Chrome's New Tab
+# Macify — macOS Aerial Screensavers in Safari or Chrome's New Tab
 
 ![GitHub Repo stars](https://img.shields.io/github/stars/jason5ng32/macOS-Screen-Saver-as-Chrome-New-Tab)
 ![GitHub](https://img.shields.io/github/license/jason5ng32/macOS-Screen-Saver-as-Chrome-New-Tab)
 ![Chrome Web Store Version](https://img.shields.io/chrome-web-store/v/lgdipcalomggcjkohjhkhkbcpgladnoe)
 ![GitHub contributors](https://img.shields.io/github/contributors/jason5ng32/macOS-Screen-Saver-as-Chrome-New-Tab)
 
-Replace Chrome's new tab page with macOS's aerial screensaver videos and a small set of calm, optional widgets. macOS is **not** required — videos are streamed from Apple's CDN and play in any platform that runs Chrome.
+Replace Safari or Chrome's new tab page with macOS's aerial screensaver videos and a small set of calm, optional widgets. macOS is **not** required — videos are streamed from Apple's CDN.
 
 ![screenshot](docs/screenshot.png)
 
 ## Features
 
 - 🎥 **156 aerial videos** in 4K SDR, sourced from Apple's current macOS catalog (Landscapes, Cities, Underwater, Space, and more).
 - 🌤️ **Live weather** — current temperature, "feels like", 3-day forecast, sunrise/sunset, UV, wind, air quality. Powered by [Open-Meteo](https://open-meteo.com/), no API key required.
-- 📌 **Top sites** widget pulled from Chrome's built-in list (no history permission needed).
+- 📌 **Top sites** widget pulled from the browser's built-in list when available (no history permission needed).
 - 💬 **Random quotes** from a curated 500-entry public-domain set.
 - 🧘 **Zen mode** — fullscreen the video with optional ambient music.
 - 🔤 **4 languages** — English, 简体中文, 繁體中文, 日本語.
@@ -22,19 +22,19 @@ Replace Chrome's new tab page with macOS's aerial screensaver videos and a small
 
 [Install from Chrome Web Store](https://chromewebstore.google.com/detail/macify-macos-screensaver/lgdipcalomggcjkohjhkhkbcpgladnoe).
 
-Or load unpacked: see [Building from source](#building-from-source).
+Or load unpacked: see [Building from source](#building-from-source). For a local Safari build, see [SAFARI.md](SAFARI.md).
 
 ## Choosing a video source
 
 Three options. Each section in the extension's settings page also includes a built-in step-by-step setup guide — this README only summarises.
 
 ### 1. Apple Server (default)
 
-Streams directly from `sylvan.apple.com`. Chrome may not trust Apple's certificate by default; two ways to fix it:
+Streams directly from `sylvan.apple.com`. If direct video playback fails, two fallback paths are available:
 
-**Option A — Reverse proxy (default on, easiest).** Video requests are routed through a hosted Cloudflare Worker that handles the certificate dance. Zero local setup. Convenient but should not be relied on long-term — set up local hosting or trust the cert when possible.
+**Option A — Reverse proxy.** Video requests are routed through your own Cloudflare Worker. Convenient, but it requires a CDN host you control.
 
-**Option B — Trust Apple's cert manually (cleanest).** Visit [https://sylvan.apple.com](https://sylvan.apple.com) once in Chrome. You'll see a security warning — click "Advanced", then "Proceed to sylvan.apple.com (unsafe)". Chrome remembers the trust and direct connection works thereafter.
+**Option B — Trust Apple's cert manually.** Visit [https://sylvan.apple.com](https://sylvan.apple.com) once in the target browser. If you see a security warning, use the browser's advanced option to proceed. The browser should remember that trust.
 
 ![Chrome warning when trusting sylvan.apple.com](docs/chromewarnning.jpg)
 
@@ -84,21 +84,20 @@ In Macify settings, switch the source to **Local server** and confirm the URL is
 
 ## Permissions
 
-Macify requests three permissions, all non-sensitive:
+Macify requests two permissions, both non-sensitive:
 
 | Permission | Used for |
 |---|---|
 | `storage` | Persist user preferences and cache weather data. |
-| `topSites` | Read Chrome's most-visited list for the Top Sites widget. |
-| `favicon` | Show favicons next to Top Sites entries (uses Chrome's built-in cache; no external network). |
+| `topSites` | Read the browser's most-visited list for the Top Sites widget when supported. |
 
 No `history` permission. No host permissions for arbitrary sites.
 
 ## Building from source
 
 Requirements: Node.js 20+ and npm.
 
-The build is **not zero-config** — Macify needs a CDN you control for the Apple aerial reverse proxy and the zen-mode music. The published Chrome Store build uses my own infrastructure; if you fork, you bring your own. The build refuses to run without these set.
+The default self-use build is zero-config: it streams directly from Apple and does not require a CDN. A CDN is only needed for the optional Apple aerial reverse proxy and zen-mode music.
 
 ### 1. Stand up your CDN host
 
@@ -134,13 +133,13 @@ Skip this if you don't care — the worker still works.
 git clone https://github.com/jason5ng32/macOS-Screen-Saver-as-Chrome-New-Tab.git
 cd macOS-Screen-Saver-as-Chrome-New-Tab
 cp .env.example .env
-# edit .env — fill in VITE_MACIFY_BASE (required)
+# edit .env only if you want VITE_MACIFY_BASE for proxy/music
 # and VITE_APPLE_PROXY_KEY (only if you set up the WAF rule above)
 npm install
 npm run build
 ```
 
-If `.env` is missing or incomplete the build aborts with a list of what's missing. See [`.env.example`](.env.example) for the full reference.
+See [`.env.example`](.env.example) for the full optional environment reference.
 
 ### 3. Load the extension
 

SAFARI.md

@@ -0,0 +1,38 @@
+# Safari self-use build
+
+This fork defaults to direct Apple streaming for Safari:
+
+- video source: Apple Server
+- reverse proxy: off
+- local video server: not required
+- zen music: off unless `VITE_MACIFY_BASE` is configured
+
+The video playlist still points at Apple's `https://sylvan.apple.com` aerial
+assets. Nothing needs to be downloaded locally.
+
+## Build
+
+```bash
+npm install
+npm run build:safari
+```
+
+The extension bundle is written to `dist/`.
+
+## Package for Safari
+
+Install full Xcode first. Apple's Safari converter is not included with the
+Command Line Tools-only install.
+
+```bash
+npm run package:safari
+```
+
+Open the generated Xcode project, sign it for local development, run the app,
+then enable the extension in Safari settings.
+
+## Optional proxy
+
+If direct Apple playback fails in Safari, set up your own Cloudflare Worker
+using `cloudflare-worker/worker.js`, set `VITE_MACIFY_BASE`, rebuild, and turn
+on "Use reverse proxy" in the extension settings.

package.json

@@ -2,12 +2,14 @@
   "name": "macify",
   "version": "2.0.0-dev",
   "private": true,
-  "description": "Transform Chrome's new tab into a macOS aerial screensaver.",
+  "description": "Transform Safari or Chrome's new tab into a macOS aerial screensaver.",
   "license": "MIT",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "build:safari": "vite build && node scripts/prepare-safari-dist.mjs",
+    "package:safari": "npm run build:safari && xcrun safari-web-extension-packager dist --macos-only",
     "preview": "vite preview",
     "zip": "node scripts/zip.js",
     "build:quotes": "node scripts/build-quotes.mjs",

scripts/prepare-safari-dist.mjs

@@ -0,0 +1,24 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const root = resolve(__dirname, '..');
+const dist = resolve(root, 'dist');
+const manifestPath = resolve(dist, 'manifest.json');
+
+const manifest = JSON.parse(await readFile(manifestPath, 'utf8'));
+
+// The background script only opens the options page on install/update.
+// Removing it avoids Safari service-worker module compatibility warnings.
+delete manifest.background;
+
+if (Array.isArray(manifest.permissions)) {
+  manifest.permissions = manifest.permissions.filter((p) => p !== 'topSites');
+  if (manifest.permissions.length === 0) {
+    delete manifest.permissions;
+  }
+}
+
+await writeFile(manifestPath, JSON.stringify(manifest, null, 2) + '\n');
+console.log('Prepared Safari-compatible dist/manifest.json');

src/_locales/en/messages.json

@@ -3,7 +3,7 @@
     "message": "Macify - Gorgeous Aerial Videos as Your New Tab"
   },
   "ext_description": {
-    "message": "Transform Chrome's new tab into macOS's gorgeous aerial screensaver videos."
+    "message": "Transform your new tab into macOS's gorgeous aerial screensaver videos."
   },
   "options_title": {
     "message": "Macify Settings"
@@ -228,7 +228,7 @@
     "message": "Why might Apple's server need extra setup?"
   },
   "video_apple_help_intro": {
-    "message": "Chrome doesn't always trust Apple's sylvan.apple.com certificate, so direct video loading may fail. Two ways to make it work:"
+    "message": "Some browsers may not trust Apple's sylvan.apple.com certificate, so direct video loading can fail. Two ways to make it work:"
   },
   "video_apple_help_option1_title": {
     "message": "Option 1 — Use the reverse proxy (easy)"
@@ -243,7 +243,7 @@
     "message": "Open"
   },
   "video_apple_help_option2_body_post": {
-    "message": "in Chrome once. You'll see a security warning — click Advanced, then \"Proceed to sylvan.apple.com (unsafe)\". Chrome remembers your trust and direct connection works from then on."
+    "message": "in the target browser once. If you see a security warning, open the advanced option and proceed. The browser should remember your trust after that."
   },
   "video_local_help_title": {
     "message": "Set up a local Apache server (one-time)"
@@ -282,7 +282,7 @@
     "message": "Translation"
   },
   "options_translation_description": {
-    "message": "Translates English mottos into your display language using Chrome's built-in on-device Translator API. No new network requests beyond the one-time model download."
+    "message": "Translates English mottos into your display language when the browser provides an on-device Translator API. No new network requests beyond the one-time model download."
   },
   "options_translation_model_label": {
     "message": "Model"
@@ -306,7 +306,7 @@
     "message": "Not supported for this language pair"
   },
   "options_translation_status_no_api": {
-    "message": "Your browser doesn't support the Translator API (requires Chrome 138+)"
+    "message": "Your browser doesn't support the Translator API"
   },
   "options_translation_download_button": {
     "message": "Download model now"

src/_locales/ja/messages.json

@@ -3,7 +3,7 @@
     "message": "Macify - 華麗なエアリアル動画の新しいタブ"
   },
   "ext_description": {
-    "message": "Chromeの新しいタブをmacOSの美しいエアリアル・スクリーンセーバー動画に変えます。"
+    "message": "新しいタブをmacOSの美しいエアリアル・スクリーンセーバー動画に変えます。"
   },
   "options_title": {
     "message": "Macify 設定"
@@ -228,7 +228,7 @@
     "message": "Apple のサーバーで追加設定が必要な理由"
   },
   "video_apple_help_intro": {
-    "message": "Chrome が Apple の sylvan.apple.com の証明書を信頼しないことがあり、動画の直接読み込みに失敗する可能性があります。2つの解決方法:"
+    "message": "一部のブラウザでは Apple の sylvan.apple.com の証明書を信頼せず、動画の直接読み込みに失敗する可能性があります。2つの解決方法:"
   },
   "video_apple_help_option1_title": {
     "message": "方法 1 — リバースプロキシを使う(簡単)"
@@ -240,10 +240,10 @@
     "message": "方法 2 — Apple の証明書を手動で信頼する(最もクリーン)"
   },
   "video_apple_help_option2_body_pre": {
-    "message": "Chrome で"
+    "message": "対象ブラウザで"
   },
   "video_apple_help_option2_body_post": {
-    "message": "を一度開きます。セキュリティ警告が表示されたら、「詳細」→「sylvan.apple.com にアクセスする (安全ではありません)」をクリック。Chrome が信頼を記憶し、以降は直接接続が機能します。"
+    "message": "を一度開きます。セキュリティ警告が表示されたら、詳細オプションを開いて続行してください。ブラウザが信頼を記憶すれば、以降は直接接続が機能します。"
   },
   "video_local_help_title": {
     "message": "ローカル Apache サーバーを設定する(一回だけ)"
@@ -282,7 +282,7 @@
     "message": "翻訳"
   },
   "options_translation_description": {
-    "message": "Chrome 内蔵の on-device Translator API を使い、英語の格言を表示言語に翻訳します。初回のモデルダウンロード以外、新たなネットワークリクエストはありません。"
+    "message": "ブラウザが on-device Translator API を提供している場合、英語の格言を表示言語に翻訳します。初回のモデルダウンロード以外、新たなネットワークリクエストはありません。"
   },
   "options_translation_model_label": {
     "message": "モデル"
@@ -306,7 +306,7 @@
     "message": "この言語ペアは未対応"
   },
   "options_translation_status_no_api": {
-    "message": "お使いのブラウザは Translator API 未対応です（Chrome 138+ が必要）"
+    "message": "お使いのブラウザは Translator API 未対応です"
   },
   "options_translation_download_button": {
     "message": "モデルをダウンロード"

src/_locales/zh_CN/messages.json

@@ -3,7 +3,7 @@
     "message": "Macify - 华丽的航拍视频新标签页"
   },
   "ext_description": {
-    "message": "将 Chrome 的新标签页变成 macOS 的华丽航拍屏保视频。"
+    "message": "将新标签页变成 macOS 的华丽航拍屏保视频。"
   },
   "options_title": {
     "message": "Macify 设置"
@@ -228,7 +228,7 @@
     "message": "为什么苹果服务器可能需要额外配置？"
   },
   "video_apple_help_intro": {
-    "message": "Chrome 不一定信任苹果 sylvan.apple.com 的证书，直连视频可能失败。两种解决方案："
+    "message": "部分浏览器不一定信任苹果 sylvan.apple.com 的证书，直连视频可能失败。两种解决方案："
   },
   "video_apple_help_option1_title": {
     "message": "方案 1 — 启用反向代理（简单）"
@@ -240,10 +240,10 @@
     "message": "方案 2 — 手动信任苹果证书（最干净）"
   },
   "video_apple_help_option2_body_pre": {
-    "message": "在 Chrome 里打开"
+    "message": "在目标浏览器里打开"
   },
   "video_apple_help_option2_body_post": {
-    "message": "一次。会出现安全警告——点「高级」，然后点「继续访问 sylvan.apple.com（不安全）」。Chrome 会记住你的信任，之后直连就没问题了。"
+    "message": "一次。如果出现安全警告，打开高级选项并继续访问。浏览器通常会记住你的信任，之后直连就没问题了。"
   },
   "video_local_help_title": {
     "message": "搭建本地 Apache 服务器（一次性配置）"
@@ -282,7 +282,7 @@
     "message": "翻译"
   },
   "options_translation_description": {
-    "message": "使用 Chrome 内建的 on-device Translator API 把英文格言翻译成你设置的显示语言。除首次模型下载外，无任何新的网络请求。"
+    "message": "当浏览器提供 on-device Translator API 时，把英文格言翻译成你设置的显示语言。除首次模型下载外，无任何新的网络请求。"
   },
   "options_translation_model_label": {
     "message": "模型"
@@ -306,7 +306,7 @@
     "message": "此语言对不支持"
   },
   "options_translation_status_no_api": {
-    "message": "你的浏览器不支持 Translator API（需要 Chrome 138+）"
+    "message": "你的浏览器不支持 Translator API"
   },
   "options_translation_download_button": {
     "message": "下载模型"

src/_locales/zh_TW/messages.json

@@ -3,7 +3,7 @@
     "message": "Macify - 華麗的空拍影片新分頁"
   },
   "ext_description": {
-    "message": "將 Chrome 的新分頁變成 macOS 的華麗空拍螢幕保護影片。"
+    "message": "將新分頁變成 macOS 的華麗空拍螢幕保護影片。"
   },
   "options_title": {
     "message": "Macify 設定"
@@ -228,7 +228,7 @@
     "message": "為什麼蘋果伺服器可能需要額外設定?"
   },
   "video_apple_help_intro": {
-    "message": "Chrome 不一定信任蘋果 sylvan.apple.com 的憑證,直連影片可能失敗。兩種解決方案:"
+    "message": "部分瀏覽器不一定信任蘋果 sylvan.apple.com 的憑證,直連影片可能失敗。兩種解決方案:"
   },
   "video_apple_help_option1_title": {
     "message": "方案 1 — 啟用反向代理(簡單)"
@@ -240,10 +240,10 @@
     "message": "方案 2 — 手動信任蘋果憑證(最乾淨)"
   },
   "video_apple_help_option2_body_pre": {
-    "message": "在 Chrome 裡開啟"
+    "message": "在目標瀏覽器裡開啟"
   },
   "video_apple_help_option2_body_post": {
-    "message": "一次。會出現安全性警告——點「進階」,然後點「繼續前往 sylvan.apple.com(不安全)」。Chrome 會記住你的信任,之後直連就沒問題了。"
+    "message": "一次。如果出現安全性警告,請開啟進階選項並繼續前往。瀏覽器通常會記住你的信任,之後直連就沒問題了。"
   },
   "video_local_help_title": {
     "message": "架設本地 Apache 伺服器(一次性設定)"
@@ -282,7 +282,7 @@
     "message": "翻譯"
   },
   "options_translation_description": {
-    "message": "使用 Chrome 內建的 on-device Translator API 把英文格言翻譯成你設定的顯示語言。除首次模型下載外，無任何新的網路請求。"
+    "message": "當瀏覽器提供 on-device Translator API 時,把英文格言翻譯成你設定的顯示語言。除首次模型下載外，無任何新的網路請求。"
   },
   "options_translation_model_label": {
     "message": "模型"
@@ -306,7 +306,7 @@
     "message": "此語言對不支援"
   },
   "options_translation_status_no_api": {
-    "message": "你的瀏覽器不支援 Translator API（需要 Chrome 138+）"
+    "message": "你的瀏覽器不支援 Translator API"
   },
   "options_translation_download_button": {
     "message": "下載模型"