Safari 27：AI 幫我寫瀏覽器套件，還會自動監測網頁更新
Apple 系統內建的 AI 終於又來了，來了！來了！從山坡上輕輕地爬下來了！
更新了新的 macOS beta 版，啟用 Siri AI 之後，發現 Safari 瀏覽器又多了一些謎之按鈕:
Apple 又送大家神奇新功能，像是我只在 Safari 打了一句話，AI 就幫我生了一個擴充套件，本文來測試一些這些神奇新功能。
Siri AI
今年的重頭戲就是 Siri AI，它現在可以聽懂更多東西，做更多事:
- 有類似隔壁棚三星或 Gemini 或是一些中國手機廠的那樣，可以根據手機/電腦/平板當下的畫面、內容來回答的功能。
- 現有的一些修圖和圖片生成功能、多媒體功能再強化
- 多了 Describe a Shortcut 這種新功能，本來人類搞老半天都用不好的東西，現在一句話就讓 AI 幫忙設定。
不過 Apple 使用者也不要暢秋，隔壁 Android 17 已經有 Create My Widget，讓人用 AI 生成小工具直接放在手機桌面了。
我升級 macOS 之後，馬上就去 Siri 的 join waitlist，但是等了老半天沒通過，最後上網找了指令，在終端機中輸入 sudo defaults write "/Library/Preferences/FeatureFlags/Domain/GenerativeModels.plist" "EnhancedSiriWaitlist" -dict-add Enabled -bool NO
然後重開機，再回去看系統設定中的 Siri，會變成 Siri(Beta) 和一些介紹文字，而不只是 joined waitlist。
還有其他民間專案 enableMacosAI，可以給某個不支援 Apple AI 的地區強行修改使用的，不過系統要關閉 SIP(系統完整保護)，自行斟酌使用吧，我自己是沒用。
然後 Craig 在 Apple WWDC 2026 June 8: Introducing Siri AI and more 的一小時8分左右向 Apple 開發者介紹一個新功能，可以用 App Intents 之類現有技術把 Apple Intelligence 整合進應用程式，還拿 LINE 舉例子，使用者只要問 Siri 就可以找到對話紀錄。
不過在 macOS 27 beta 還是測試不出來，可能要等 LINE 那邊也更新吧。
Describe an Extension 讓 AI 幫忙製作瀏覽器套件
只要輸入一句 prompt，AI 就自動生成一個瀏覽器套件。
要先去啟用 Siri AI，Safari 的網站工具列選單才會多出按鈕，操作流程是這樣:
1.輸入需求
2.自動檢查是否有現成的類似套件
沒有的話可以按 Create，開始生成
3.等待一下 creating extension...然後就可以用了。
例如自動挑出租屋網站上可養寵物的物件，這樣網頁逛起來乾淨許多。
瀏覽器最上面多了一條預設只在目前網域啟用的瀏覽器擴充套件，也可以選擇允許給其他網域使用。
連擴充套件的 icon 都自動畫好了。一般用 ai coding agent 做瀏覽器擴充套件，沒事不會自動自發生成 icon，我的 Google Chrome 裡面躺了一堆沒 icon 的擴充套件。
用中文講需求，Siri AI 也能做，很多簡單需求可能跟寫個 userscript 差不多，不過這全程都是瀏覽器天生就有的功能，使用者不用打開什麼 developer 設定，或是點到一些像工程師做的第三方頁面，到處都有贊助按鈕，或是不知道啥的條款和技術規範。
不過 Describe an Extension 實際用起來也挺多限制:
離線作業
要連上網路才能用，幾秒鐘就生成一個套件，背後不知道是不是 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 就會在 MagicExtensions 資料夾裡面新增一個{套件名稱}-{隨機序號}的資料夾...
我們也只能從瀏覽器設定內看到套件的一些允許網域、快捷鍵等設定，沒辦法直接切換成某個之前的版本。
明明是程式碼，但人類能做的版控幾乎為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 協作，取代從零開始 vibe coding
目前還在測試版，後續值得期待。
現階段不太適合把AI生成的規格萬言書放進去，還是講幾句話做一些小工具就好。
操作介面跟流程這就是:輸入需求->生成->然後就是 View/Save or Edit，AI 沒辦法向我解釋，他根據我的需求做了什麼設計，那些沒辦法做，哪些需要調整之類的。
沒辦法吹說什麼「vibe coding 的老師們可以開始找新工作了」，因為這種 AI 工具幾乎只能講一句話，限制超多，版本控管幾乎為零的 AI，更考驗一次把需求講清楚的功力，最好不要有先做一點什麼出來，然後一直 breaking change 的想法。
也沒辦法吹說「下個月可以不用訂閱 Claude Code 了/Sam Altman哭暈在廁所」，因為比起正常的開發流程(需求管理、程式碼版控、單元測試、整合測試等)，Describe an Extension 限制太多，還是太像玩具了。
看一些 3C KOL 的影片，iPhone 的 Safari 也有這些功能，這不是 macOS 專屬的。
Notify Me 自動檢查網頁更新
Safari 多了一個新功能，可以自動幫人自動檢查網頁更新，不用自己重新整理或寫爬蟲。這功能要啟用 Siri AI 才會有。
時間設定很死，只有 daily/weekly/monthly 可以選，然後點幾點幾分可以再手動輸入時間。要是今天錯過了，就只能等明天了。
要是成功偵測到一次更新，下次進入網頁時，會看到最上面那條顯示更新檢查時間的，變成詢問是否要繼續偵測。
其實 Safari 的 Notify Me 功能滿陽春的，通知只是顯示一句「偵測到網頁有更新」，而不是口語化完整敘述「增加了XXX，移除了XXX，某某跟某某換順序，某個地方數字從5改成10，第五段文章的結論從YY改成ZZ，某張圖片左下角的物品從AA換成BB......」
語意化偵測實驗
想看看 AI 到底是有多厲害，建了幾個測試頁面，其中一個測試項目是把 dom 整個換掉。設定監測某網頁上的數字小於多少時要通知我。
設定時是單純在表格(html table)裡放文字，
然後更新後的網頁，除了把金額數字調小，還把 html dom 通通換成 ul, li, div, span，
結果 Notify Me 竟然也會跳出提醒!
如果是用程式寫，用 XPath 之類的 DOM 節點選取器，只要把 table 改成 ul，順序換一下，監測就失敗了，動不動就要遍歷全部元素再檢查文字，或是構思其他機制。
但 Notify Me 依然能正確觸發，代表它也許不是靠結構化路徑來定位監測目標。
後續需要做更多實驗，來觀察它是不是真的語意化理解網頁。
反正目前只是第一個 beta 版系統，使用限制很多、功能陽春就算了，就先忍受一下。
每個 url 只能設一個通知
如果一個網頁上想監測的條件很多，只能想辦法把 prompt 打得超級長，但是打字時他會一直轉圈圈檢查，輸入體驗不算特別舒服。
每個 url 只能設一個通知，還有另一層意思，例如有些網站是辦完活動/商品賣完，就把網頁直接關了，下次上的又是一個全新的 url，剛剛 prompt 打了老半天，說沒了就沒了。
設定到最後可能會忘記那些網站有設定，Safari 有個清單可以查:
macOS 可以在 Safari>Settings>Websites>Notify Me 看到一個列表，清楚列出哪個網站幾點幾分要通知。
跨裝置策略?
測試之後發現一定要每天的那個時間，開著電腦，才能成功監測更新。
根據 server access log，應該是真的用那台裝置本身去檢查網頁，UserAgent 字串也沒什麼特徵，無法分出是真人還是 AI 來看網頁。
例如我在 macOS 設定 10am 檢查，但是隔天的 10am 電腦沒開機，那個網頁就沒有造訪紀錄，監測失敗，
電腦晚一點開機後呢? 也不會重跑，設定好的那個時間點電腦沒開，就是不會去檢查。
找了一支 iPhone 升級到 iOS27 beta，當電腦有偵測到網頁更新，發出通知，但看起來手機這邊沒任何通知，不知道是沒有這功能，還是手機沒辦法開 Siri AI(沒有 Notify me功能)的關係。
希望可以做到這樣，就能達完美的跨裝置互通:
- 監測任務是在電腦上的 Safari 設定的，當電腦沒開機時，能不能自動用同 Apple ID 的手機去跑?
- 如果電腦沒電或是剛好沒開機，監測任務能自動跑來 iPhone 上進行，讓 iPhone 發通知?
- 網頁有更新時，能不能電腦/iPhone/iPad 一起發通知?
不過有些構思可能是癡人說夢，畢竟「瀏覽器在背景執行網頁程式」一直是網頁前端界的一個聖杯，雖然有，但是都只能在特定條件給特定功能使用。
前端技術來說，例如 Service Worker 可以在背景執行，但主要用途拿來做快取暫存、離線功能和網頁推播通知。Background Sync 也只能在符合條件時短暫運作。各家瀏覽器對背景執行時間、網路存取頻率和耗電量都有一大堆限制，不然每個網站都偷偷在背景跑程式，手機和筆電的電池很快就會被榨乾。
至於瀏覽器要怎麼跟作業系統打交道，怎樣在背景偷偷工作，這些「上游廠商」在談事情，不是我們基層網頁工程師能控制的。
如果 Notify Me 的機制真的是在裝置上定時用 AI 分析內容，那它需要的資源其實遠比一般網頁背景同步高得多。光是要不要喚醒瀏覽器、什麼時間執行、執行多久、遇到各種錯誤例外要怎麼重試，都會影響系統耗電和使用者體驗。
所以 Notify Me 如果要做到真正的跨裝置無縫接軌，最合理的做法反而不是讓我手上哪台設備的 Safari 在背景偷偷工作，而是由 Apple 自己的伺服器代為執行監測，再透過 iCloud 同步結果到所有裝置。
如果真有這種功能，Apple 就要負責替全球使用者定時分析網站內容，平白無故增加一大筆成本，如果你是 Apple 的主管，要對股東交代利潤，你會允許這樣做嗎?
因此目前這種「哪台裝置建立監測任務，就由哪台裝置負責執行」的模式，從工程角度看反而比較合理。只是對使用者來說，總會希望 Apple 哪天能把它進化成真正的跨裝置個人服務。
更新提示的技術思考
更新提示是一個講起來很簡單，做起來很麻煩的事
網頁不會通知他有更新(有RSS或其他機制的先不談)，實際上就是我們要一直定時輪詢檢查別人的網頁，檢查時間距離太久了，例如我們11:01、11:30會去檢查，但網頁11:02更新，完美擦身而過，商品/預約/情報在這幾十分鐘時間已經被人捷足先登了。
半小時一次太久，那就調近一點? 如果檢查次數太密集了，或是用到某些不該用的 cookies 資訊，觸發防護機制，可能連人家的網站都上不去。
什麼叫網頁有更新/價錢有改?
需要在前一次檢查時保留一份，下次檢查時跟前一次的比對，或是各種機制。而且還要針對短時間內反覆修改的情況做調整，以免系統一直提示有新商品上架。
什麼叫定時檢查?
如果我要買熱騰騰的麵包，麵包店有固定的出爐時間，正常人會出爐前去排隊，而不是凌晨大半夜每5分鐘打電話去問。那怎麼知道人家網頁通常幾點更新? 所以需要觀察，監測時要有精細的時間策略。
什麼叫指定條件?
例如我要找某討論版有人在桃園賣某某商品，程式寫的查詢條件，光是地名需要比對含有桃園、中壢、平鎮、八德、楊梅、觀音、龍潭、新屋、大園、北部、北桃、各重劃區名稱.....等各一大串名單，這只是區域型問題而已。
另外在比對英文、比對數字範圍、比對日期時間等需求監測上，都各有各的雷點和技巧，傳統寫爬蟲程式的苦工們，就是這樣把時間燒光的。現在用 LLM 能更理解內容一次到位嗎? 也未必。不過這種事情討論到最後沒啥意義，反正出問題時還是基層的人類去收拾爛攤子。
還有一種網頁更新監測的使用場景，需要只給一個連結，然後自動針對那個頁面內的幾個連結，還有那幾個連結裡面的連結，還需要設定層數，這個術語叫深度查詢，但目前的 Notify Me 看起來不支援這種連鎖監測機制。
這類更新監測通知工具背後還有一大堆工程問題，光是只解決整個流程的其中一個問題，就足以變成一門生意，養活一家幾十人的公司了(Firecrawl, Visualping, Distill.io, EasyCron...等等)。
所以有些科技短影音說 Notify Me 要拿來搶票或是搶商品......聽聽就好。
結論:Notify Me 現階段功能比較簡單，限制很多，就當成是新系統免費贈送的小玩具吧。
Safari 前端更新
從 News from WWDC26:WebKit in Safari 27 beta 又列了一大份更新日誌，除了一些 Google Chrome/Chromium 老早就支援的，挑幾個我覺得有趣的亮點：
更細緻的 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、SDD、擁抱 AI 之類，會議室充滿快活的空氣。
APP 下載量不到 200 萬次？Apple 請開發者免費用雲端 AI
今年 WWDC 2026 除了 Siri AI 之外，還有一個有趣的消息是 Apple 願意免費提供雲端 AI 給小型開發者使用。
只要符合 App Store Small Business Program 資格，而且所有 App 的累積首次下載量還不到 200 萬次，就能申請使用 Apple Foundation Models 運行在 Private Cloud Compute（PCC）上的大型模型，而且不用支付 Cloud API 或 Token 費用。
這其實蠻有心的。
開發一個 AI App，最大的問題往往不只是技術，還有帳單。某天突然爆紅，月底看到 OpenAI、Anthropic 或 Google 的 API 帳單，自己最期待(終於有人用了)和最不想碰的事(成本墊高但無法回收)同時來臨。
Apple 讓開發者直接整合進 Apple 生態系，不用申請 API Key 然後每天斤斤計較誰又花了多少 Tokens，也不用架設推理伺服器，可以挺直腰桿回應使用者關於AI模型和隱私的問題，每天可以少花5小時回應使用者要如何 BYOK、為什麼哪一家的 API key 不能用之類的問題。
當然使用者的裝置端也有限制，開發者也需要另外申請:
- 首先使用者的裝置必須支援 Apple Intelligence，Apple Foundation Models 本機模型其實前幾年就有了，也有開發者用來做一些會議紀錄錄音轉文字、小遊戲之類的 app，但好像也沒聽到有什麼非常重大，人人稱讚的應用。
- 其次每個使用者都有每日使用額度，而 iCloud+ 訂閱者的額度會比較高。
- 開發者要申請 App Store Small Business Program，就是那個佣金會從 30% 調降的那個玩意。
- 申請 Private Cloud Compute Entitlement
不過畢竟模型是 Apple 提供的，自然要遵守 Apple 的規範。某些灰色地帶、成人內容、角色扮演或比較香豔刺激不可描述的 AI 應用就別想了。
如果只是想做一些小型 AI App 驗證市場，Apple 幾乎等於直接送一張免費體驗券。對獨立開發者來說，這可能比 Siri AI 本身還有價值。
摺疊螢幕的 iPhone 或觸控螢幕的 Macbook
在今年各種消息來看，iPhone 很可能會有摺疊手機出現。
從給手機殼&保護貼廠商的模型機，還有 beta 系統中的一些跡象看來，今年 iPhone 應該會有摺疊手機。這個 iPhone 摺疊機的機身比例接近 1:根號2，外屏長寬比例接近2:3，打開後內屏接近4:3。
這種新的特殊比例，一堆 APP 又要重新設計了。當然那些覺得只要畫一個固定尺寸，就能滿足所有 iPhone 直立第一屏畫面的人，也還是繼續這樣覺得 UI 設計跟 APP 設計沒什麼。
(模擬圖，暫不考慮瀏覽器工具列位置)
等今年 9 月新機型發表之後，再來看看實際的 viewport 數值，還有網頁又有什麼特殊的處置步驟。
然後 macOS 27 beta + iPadOS 27 的 Sidecar 中，現在可以直接用手指 在 iPad 螢幕上點擊、滑動、拖曳，就能完整控制 Mac 的桌面和應用程式，感覺就像 Mac 有觸控螢幕一樣。
之前筆電+iPad 這種組合的 Sidecar 只有開放部分簡單手勢，多半要用 Apple Pencil 才能在 iPad 上點按鈕、開 App、拖曳視窗等，現在新系統功能做這樣，一些科技媒體推測今年9月可能會有螢幕能觸控的 Macbook。
在 2010 年時 Steve Jobs 就有講過他們為什麼不做觸控螢幕 MacBook，如果今年真的出了，那又是一個違背祖宗的決定😆