Safari 27：AI 幫我寫瀏覽器套件，還會自動監測網頁更新

離線作業

要連上網路才能用，幾秒鐘就生成一個套件，背後不知道是不是 Apple 機器 Private Cloud Compute 動得很厲害。

因為我的裝置不能跑 AFM 3 Core Advanced
所以不知道那些能跑的高階設備(iPhone 17 Pro / Air, M4 iPad 12GB+, M3+ Mac 12GB+)，是不是可以不用連網就能用Describe an Extension?

為付費的 Safari 套件增加一波廣告機會

有些需求只會列出付費的 Safari 套件，直接罷工不幹(無法進到下一步)

像上面這個需求，本來是規劃在特定網頁做某些操作時，自動把資料發到本機程式 localhost:幾port 或外部 HTTP API，這種在 ChatGPT 或任何一個裝在電腦上的 AI coding agent 都能做的東西，Siri AI 不知道為啥不給做。

Describe an Extension 建立時會報錯 cannot load remote content。

AI 寫的套件叫 MagicExtensions

想看 AI 寫得好不好，可以到 ~/Library/Containers/Safari/Data/Library/Safari/MagicExtensions 找到擴充套件檔案。

幾乎是每改一次需求，AI 就會重做一個{套件名稱}-{隨機序號}的資料夾...

我們也只能從瀏覽器設定內看到套件的一些允許網域、快捷鍵等設定，沒辦法直接切換成某個之前的版本。

明明是程式碼，但人類能做的版控幾乎為0，大概只能自己去資料夾複製出來，手動備份。

能不能調用蘋果的 AI?

有些需求，看到 AI 只寫一堆 regex 比對字串，用起來當然是效果不好。

如果是 web app 的邏輯，當然是直接接上某個 llm api 來處哩，但 Apple 的 on-device AI 理念喊了好幾年，想說會不會剛好可以從這邊調用某種內建的 AI/LLM?

結果是報錯 Described extensions cannot use AI or external services.

字數限制

我沒試出那個 prompt 的極限，目前看起來超長文字照樣也能貼進去，不會被截斷。

不過最大的問題是 prompt 過長，會先碰到電腦一直轉彩球，然後那個輸入框高度是固定的，打太多字非常不舒服。

而且送出後會提示

Try something different to create an extension.

感想

目前還在測試版，後續值得期待。

現階段不太適合把AI生成的規格萬言書放進去，還是講幾句話做一些小工具就好。

操作介面跟流程這就是:輸入需求->生成->然後就是 View/Save or Edit，AI 沒辦法向我解釋，他根據我的需求做了什麼設計，那些沒辦法做，哪些需要調整之類的。

沒辦法吹說什麼「vibe coding 的老師們可以開始找新工作了」，因為這種 AI 工具幾乎只能講一句話，限制超多，版本控管幾乎為零的 AI，更考驗一次把需求講清楚的功力，最好不要有先做一點什麼出來，然後一直 breaking change 的想法。

也沒辦法吹說「下個月可以不用訂閱 Claude Code 了/Sam Altman哭暈在廁所」，因為比起正常的開發流程(需求管理、程式碼版控、單元測試、整合測試等)，Describe an Extension 限制太多，還是太像玩具了。

看一些 3C KOL 的影片，iPhone 的 Safari 也有這些功能，這不是 macOS 專屬的。

語意化偵測實驗

想看看 AI 到底是有多厲害，建了幾個測試頁面，其中一個測試項目是把 dom 整個換掉。設定監測某網頁上的數字小於多少時要通知我。

設定時是單純在表格(html table)裡放文字，
然後更新後的網頁，除了把金額數字調小，還把 html dom 通通換成 ul, li, div, span，
結果 Notify Me 竟然也會跳出提醒!

如果是用程式寫，用 XPath 之類的 DOM 節點選取器，只要把 table 改成 ul，順序換一下，監測就失敗了，動不動就要遍歷全部元素再檢查文字，或是構思其他機制。
但 Notify Me 依然能正確觸發，代表它也許不是靠結構化路徑來定位監測目標。

後續需要做更多實驗，來觀察它是不是真的語意化理解網頁。

但目前只是第一個 beta 版系統，使用限制還是非常多。

每個 url 只能設一個通知

如果一個網頁上想監測的條件很多，只能想辦法把 prompt 打得超級長，但是打字時他會一直轉圈圈檢查，輸入體驗不算特別舒服。

每個 url 只能設一個通知，還有另一層意思，例如有些網站是辦完活動/商品賣完，就把網頁直接關了，下次上的又是一個全新的 url，剛剛 prompt 打了老半天，說沒了就沒了。

跨裝置策略?

根據 server access log，應該是真的用那台裝置本身去檢查網頁，UserAgent 字串也沒什麼特徵，無法分出是真人還是 AI 來看網頁。

例如我在 macOS 設定 10am 檢查，但是隔天的 10am 電腦沒開機，那個網頁就沒有造訪紀錄，監測失敗，

那我在 11am 電腦開機後呢? 也不會重跑。

監測任務是在電腦上的 Safari 設定的，當電腦沒開機時，能不能自動用同 Apple ID 的手機去跑? 如果電腦沒電或是剛好沒開機，監測任務能自動跑來 iPhone 上進行，讓 iPhone 發通知? 這樣就能達完美的跨裝置互通。

找了一支 iPhone 升級到 iOS27 beta，但看起來手機沒發出任何通知，不知道是沒有這功能，還是手機沒辦法開 Siri AI(沒有 Notify me功能)的關係。

更新提示的技術思考

更新提示是一個講起來很簡單，做起來很麻煩的事

網頁不會通知他有更新(有RSS或其他機制的先不談)，實際上就是一直定時輪詢檢查別人的網頁，如果檢查次數太密集了，或是用到某些不該用的 cookies 資訊，觸發防護機制，可能連人家的網站都上不去。

什麼叫網頁有更新/價錢有改?
需要在前一次檢查時保留一份，下次檢查時跟前一次的比對，或是各種機制。而且還要針對短時間內反覆修改的情況做調整，以免系統一直提示有新商品上架。

什麼叫定時檢查?
如果我要買熱騰騰的麵包，麵包店有固定的出爐時間，正常人會出爐前去排隊，而不是凌晨大半夜每5分鐘打電話去問。那怎麼知道人家網頁通常幾點更新? 所以需要觀察，監測時要有精細的時間策略。

有些網頁更新監測的使用場景，需要只給一個連結，然後自動針對那個頁面內的幾個連結，還有那幾個連結裡面的連結，還需要設定層數，這個術語叫深度查詢，但目前的 Notify Me 看起來不支援這種連鎖監測機制。

這類工具背後還有一大堆工程問題，光是把這些問題解決，就足以變成一門生意，甚至都可以開一家公司專門幹這活了(Firecrawl, Visualping, Distill.io...等等)

結論:Notify Me 現階段功能比較簡單，限制很多，就當成是新系統免費贈送的小玩具吧。

更細緻的 text-autospace 支援

關於網頁排版中英混排自動加空格（盤古之白）的 text-autospace，之前另篇文章介紹過，Safari 從 18.4 開始支援，Chrome 也很早就支援，但這次是 Safari 又超前一步了。

Safari 27 beta 這次搶先支援 text-autospace 的 ideograph-alpha(拉丁字母和CJK字母) ideograph-numeric(數字和CJK字母)，可以個別控制，Chrome 只能選擇全加或不加。

這絕對不是來整前端工程師之類的基層人員，讓他們又要因為文字換行導致版面跑掉，或是想多調幾種樣式看看，而來增加工作量的。而是除了自己加空白、手動調間距之外，又有更多選擇(然後只有 Safari 27 看得到，沒升級的，或是其他瀏覽器都看不到)。

可客製化樣式的原生下拉選單

這絕對是這次最振奮人心的功能。過去為了修改 html 原生的下拉選單 <select> 樣式，開發者只能放棄原生標籤，寫一堆 HTML&CSS&JavaScript 辛苦地刻一個假的下拉選單，還要處理各種無障礙 (a11y) 與鍵盤操作的 Bug。

現在，只要加上 appearance: base-select 消除系統預設樣式，就可以完全用 CSS 自訂選項 (<option>) 的外觀。

可以修改打勾圖示 (::checkmark)、展開箭頭 (::picker-icon)，甚至在選項裡放圖片和多行說明文字（支援 Flexbox/Grid），同時保留原生表單控制項的所有好處。

這玩意在 Chrome 那邊也支援，可以放心使用......個屁! Safari 26&18 那些沒升級上來的使用者怎麼辦? 我還是乖乖使用 shadcn 或其他前端套件的 dropdown menu。

乾淨俐落的 :heading 偽類

寫 CSS 時不用再寫一大串 selector h1, h2, h3, h4, h5, h6 { ... } 了。現在可以直接使用 :heading 一次選取所有層級的標題；如果只想針對特定層級，也可以寫成 :heading(1, 2)（只選 h1 和 h2），讓 CSS 乾淨非常多。

這只是一個戰未來的 CSS 功能，因為 Chrome 那邊還不支援，等四五年後瀏覽器支援度上來了，再考慮使用吧。

什麼? 你說現在沒人在寫CSS選擇器了?
都直接在 html tag 上這樣幹:

<h1 class="
  text-[clamp(1.75rem,4vw,3.5rem)]
  font-extrabold tracking-tight leading-[1.15]
  text-gray-500 dark:text-white
  bg-linear-to-r from-blue-600 to-purple-600
  md:text-[clamp(2.25rem,5vw,4.5rem)]
  lg:text-[clamp(2.75rem,6vw,5.5rem)]
  2xl:text-[clamp(3rem,7vw,6.5rem)]
  mb-4 md:mb-6 lg:mb-8
  mt-8 md:mt-12 lg:mt-16
  px-4 md:px-6 lg:px-8
  max-w-[min(90ch,100%-2rem)] mx-auto
  text-balance
  [word-break:break-word]
  [font-optical-sizing:auto]
  [font-variation-settings:'wght'_800]
  [text-shadow:_0_1px_2px_rgb(0_0_0/10%)]
  [--wtf-size:var(--size1,clamp(1.75rem,4vw,3.5rem))]
  [font-size:var(--wtf-size)]
  [--wtf-color:var(--color1,#111827)]
  [color:var(--wtf-color)]
  [--wtf-spacing:var(--spacing1,1rem)]
  px-[var(--wtf-spacing)]
  [--wtf-gradient:linear-gradient(135deg,#2563eb,#7c3aed)]
  bg-[var(--wtf-gradient)]
  [--wtf-shadow:0_4px_6px_-1px_rgb(0_0_0/0.1)]
  shadow-[var(--wtf-shadow)]
  [--wtf-line-height:1.15]
  leading-[var(--wtf-line-height)]
  [--wtf-tracking:-0.02em]
  tracking-[var(--wtf-tracking)]
  [--wtf-animation:fade-in-up_0.6s_ease-out]
  animate-[var(--wtf-animation)]
  [--wtf-theme-primary:#2563eb]
  [text-decoration-color:var(--wtf-theme-primary)]
  [--wtf-theme-secondary:#7c3aed]
  [text-decoration-color:var(--wtf-theme-secondary)]
  [--wtf-bg:#ffffff]
  bg-[var(--wtf-bg)]
  [--wtf-text:#111827]
  [color:var(--wtf-text)]
  [--wtf-spacing-unit:0.25rem]
  m-[var(--wtf-spacing-unit)]
  [--wtf-radius:0.5rem]
  rounded-[var(--wtf-radius)]
  [--wtf-transition:all_0.2s_ease]
  transition-[var(--wtf-transition)]
  [--wtf-heading-font:'Inter','SF Pro','system-ui']
  font-[var(--wtf-heading-font)]
  [--wtf-breakpoint:1024px]
  min-w-[var(--wtf-breakpoint)]
  [--wtf-container:1280px]
  max-w-[var(--wtf-container)]
  [--wtf-grid:12]
  w-[calc(100%/var(--wtf-grid))]
  [--wtf-gap:1.5rem]
  gap-[var(--wtf-gap)]
  [--wtf-safe-top:env(safe-area-inset-top)]
  [--wtf-safe-bottom:env(safe-area-inset-bottom)]
  [--wtf-safe-left:env(safe-area-inset-left)]
  [--wtf-safe-right:env(safe-area-inset-right)]
  pt-[var(--wtf-safe-top)]
  pb-[var(--wtf-safe-bottom)]
  pl-[var(--wtf-safe-left)]
  pr-[var(--wtf-safe-right)]
  [--wtf-deprecated-1:red]
  [--wtf-deprecated-2:blue]
  [--wtf-legacy-support:rgba(0,0,0,0.5)]
  [--wtf-i-dont-know-what-this-does:1]
  animate-[fade-in-up_0.6s_ease-out]
  hover:scale-[1.02] hover:brightness-110
  transition-all duration-300 ease-out
">
  標題在這裡
</h1>

或是直接叫 AI 改，人類要去 review 程式碼還會被笑。接著就是什麼 harness engineering、擁抱 AI 之類，會議室充滿快活的空氣。