Gate Safari behavior by build target

Author: ynot0083

.env.example

@@ -3,15 +3,13 @@
 # code; non-prefixed vars are silently ignored.
 
 # ---------------------------------------------------------------------------
-# OPTIONAL — only needed for reverse proxy video mode and zen music.
+# REQUIRED for Chrome builds — build fails fast if missing.
+# Optional for `npm run build:safari`.
 #
 # 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.

README.md

@@ -1,19 +1,19 @@
-# Macify — macOS Aerial Screensavers in Safari or Chrome's New Tab
+# Macify — macOS Aerial Screensavers in 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 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.
+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.
 
 ![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 the browser's built-in list when available (no history permission needed).
+- 📌 **Top sites** widget pulled from Chrome's built-in list (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,20 @@ Replace Safari or Chrome's new tab page with macOS's aerial screensaver videos a
 
 [Install from Chrome Web Store](https://chromewebstore.google.com/detail/macify-macos-screensaver/lgdipcalomggcjkohjhkhkbcpgladnoe).
 
-Or load unpacked: see [Building from source](#building-from-source). For a local Safari build, see [SAFARI.md](SAFARI.md).
+Or load unpacked: see [Building from source](#building-from-source). For an
+experimental 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`. If direct video playback fails, two fallback paths are available:
+Streams directly from `sylvan.apple.com`. Chrome may not trust Apple's certificate by default; two ways to fix it:
 
-**Option A — Reverse proxy.** Video requests are routed through your own Cloudflare Worker. Convenient, but it requires a CDN host you control.
+**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 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.
+**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.
 
 ![Chrome warning when trusting sylvan.apple.com](docs/chromewarnning.jpg)
 
@@ -84,20 +85,21 @@ In Macify settings, switch the source to **Local server** and confirm the URL is
 
 ## Permissions
 
-Macify requests two permissions, both non-sensitive:
+Macify requests three permissions, all non-sensitive:
 
 | Permission | Used for |
 |---|---|
 | `storage` | Persist user preferences and cache weather data. |
-| `topSites` | Read the browser's most-visited list for the Top Sites widget when supported. |
+| `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). |
 
 No `history` permission. No host permissions for arbitrary sites.
 
 ## Building from source
 
 Requirements: Node.js 20+ and npm.
 
-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.
+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.
 
 ### 1. Stand up your CDN host
 
@@ -133,13 +135,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 only if you want VITE_MACIFY_BASE for proxy/music
+# edit .env — fill in VITE_MACIFY_BASE (required)
 # and VITE_APPLE_PROXY_KEY (only if you set up the WAF rule above)
 npm install
 npm run build
 ```
 
-See [`.env.example`](.env.example) for the full optional environment reference.
+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.
 
 ### 3. Load the extension
 

package.json

@@ -7,8 +7,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "build:safari": "vite build && node scripts/prepare-safari-dist.mjs",
+    "build": "vite build --mode chrome",
+    "build:safari": "vite build --mode safari && 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",

scripts/prepare-safari-dist.mjs

@@ -6,6 +6,55 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const root = resolve(__dirname, '..');
 const dist = resolve(root, 'dist');
 const manifestPath = resolve(dist, 'manifest.json');
+const safariLocaleOverrides = {
+  en: {
+    ext_description:
+      "Transform your new tab into macOS's gorgeous aerial screensaver videos.",
+    video_apple_help_intro:
+      "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_option2_body_post:
+      '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.',
+    options_translation_description:
+      '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_status_no_api:
+      "Your browser doesn't support the Translator API",
+  },
+  ja: {
+    ext_description:
+      '新しいタブをmacOSの美しいエアリアル・スクリーンセーバー動画に変えます。',
+    video_apple_help_intro:
+      '一部のブラウザでは Apple の sylvan.apple.com の証明書を信頼せず、動画の直接読み込みに失敗する可能性があります。2つの解決方法:',
+    video_apple_help_option2_body_pre: '対象ブラウザで',
+    video_apple_help_option2_body_post:
+      'を一度開きます。セキュリティ警告が表示されたら、詳細オプションを開いて続行してください。ブラウザが信頼を記憶すれば、以降は直接接続が機能します。',
+    options_translation_description:
+      'ブラウザが on-device Translator API を提供している場合、英語の格言を表示言語に翻訳します。初回のモデルダウンロード以外、新たなネットワークリクエストはありません。',
+    options_translation_status_no_api:
+      'お使いのブラウザは Translator API 未対応です',
+  },
+  zh_CN: {
+    ext_description: '将新标签页变成 macOS 的华丽航拍屏保视频。',
+    video_apple_help_intro:
+      '部分浏览器不一定信任苹果 sylvan.apple.com 的证书，直连视频可能失败。两种解决方案：',
+    video_apple_help_option2_body_pre: '在目标浏览器里打开',
+    video_apple_help_option2_body_post:
+      '一次。如果出现安全警告，打开高级选项并继续访问。浏览器通常会记住你的信任，之后直连就没问题了。',
+    options_translation_description:
+      '当浏览器提供 on-device Translator API 时，把英文格言翻译成你设置的显示语言。除首次模型下载外，无任何新的网络请求。',
+    options_translation_status_no_api: '你的浏览器不支持 Translator API',
+  },
+  zh_TW: {
+    ext_description: '將新分頁變成 macOS 的華麗空拍螢幕保護影片。',
+    video_apple_help_intro:
+      '部分瀏覽器不一定信任蘋果 sylvan.apple.com 的憑證,直連影片可能失敗。兩種解決方案:',
+    video_apple_help_option2_body_pre: '在目標瀏覽器裡開啟',
+    video_apple_help_option2_body_post:
+      '一次。如果出現安全性警告,請開啟進階選項並繼續前往。瀏覽器通常會記住你的信任,之後直連就沒問題了。',
+    options_translation_description:
+      '當瀏覽器提供 on-device Translator API 時,把英文格言翻譯成你設定的顯示語言。除首次模型下載外，無任何新的網路請求。',
+    options_translation_status_no_api: '你的瀏覽器不支援 Translator API',
+  },
+};
 
 const manifest = JSON.parse(await readFile(manifestPath, 'utf8'));
 
@@ -14,11 +63,25 @@ const manifest = JSON.parse(await readFile(manifestPath, 'utf8'));
 delete manifest.background;
 
 if (Array.isArray(manifest.permissions)) {
-  manifest.permissions = manifest.permissions.filter((p) => p !== 'topSites');
+  manifest.permissions = manifest.permissions.filter(
+    (p) => !['topSites', 'favicon'].includes(p),
+  );
   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');
+
+for (const [locale, overrides] of Object.entries(safariLocaleOverrides)) {
+  const messagesPath = resolve(dist, '_locales', locale, 'messages.json');
+  const messages = JSON.parse(await readFile(messagesPath, 'utf8'));
+  for (const [key, message] of Object.entries(overrides)) {
+    if (messages[key]) {
+      messages[key].message = message;
+    }
+  }
+  await writeFile(messagesPath, JSON.stringify(messages, null, 2) + '\n');
+}
+
+console.log('Prepared Safari-compatible dist assets');

src/_locales/en/messages.json

@@ -3,7 +3,7 @@
     "message": "Macify - Gorgeous Aerial Videos as Your New Tab"
   },
   "ext_description": {
-    "message": "Transform your new tab into macOS's gorgeous aerial screensaver videos."
+    "message": "Transform Chrome's 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": "Some browsers may not trust Apple's sylvan.apple.com certificate, so direct video loading can fail. Two ways to make it work:"
+    "message": "Chrome doesn't always trust Apple's sylvan.apple.com certificate, so direct video loading may 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 the target browser once. If you see a security warning, open the advanced option and proceed. The browser should remember your trust after that."
+    "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."
   },
   "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 when the browser provides an on-device Translator API. No new network requests beyond the one-time model download."
+    "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."
   },
   "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"
+    "message": "Your browser doesn't support the Translator API (requires Chrome 138+)"
   },
   "options_translation_download_button": {
     "message": "Download model now"

src/_locales/ja/messages.json

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

src/_locales/zh_CN/messages.json

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