[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-tap-browser-automation-programs-zh":3,"tags-tap-browser-automation-programs-zh":33,"related-lang-tap-browser-automation-programs-zh":50,"related-posts-tap-browser-automation-programs-zh":54,"series-ai-agent-0a600e43-b461-40f8-851e-0442cf567d84":91},{"id":4,"title":5,"content":6,"summary":7,"source":8,"source_url":9,"author":10,"image_url":11,"keywords":12,"language":21,"translated_content":10,"views":22,"is_premium":23,"created_at":24,"updated_at":24,"cover_image":11,"published_at":25,"rewrite_status":26,"rewrite_error":10,"rewritten_from_id":27,"slug":28,"category":29,"related_article_id":30,"status":31,"google_indexed_at":32,"x_posted_at":10,"tweet_text":10,"title_rewritten_at":10,"title_original":10,"key_takeaways":10,"topic_cluster_id":10,"embedding":10,"is_canonical_seed":23},"0a600e43-b461-40f8-851e-0442cf567d84","Tap 把瀏覽器操作變成程式","\u003Cp>瀏覽器自動化最煩的點。就是每次都要付 AI 費。\u003Ca href=\"https:\u002F\u002Fdev.to\u002Fleonting1010\u002Fprograms-beat-prompts-how-tap-turns-ai-into-a-compiler-for-browser-automation-oab\" target=\"_blank\" rel=\"noopener\">Tap\u003C\u002Fa> 想換個玩法。先讓模型把流程看懂一次。再把動作寫成程式，之後直接重播。\u003C\u002Fp>\u003Cp>這件事很實際。很多團隊一天會跑 50 次、100 次。每次都叫 LLM 想一遍，錢跟延遲都很難看。Tap 的思路是把 AI 放在前面，把執行放到後面。講白了，就是把「聊天」改成「編譯」。\u003C\u002Fp>\u003Cp>Tap 不是單純的瀏覽器外掛。它是一套 protocol 加工具鏈。它會看 DOM、網路請求、accessibility tree，然後產生 \u003Ccode>.tap.js\u003C\u002Fcode>。第一次靠模型，之後靠 JavaScript。這種設計很像把瀏覽器操作做成可重用的資產。\u003C\u002Fp>\u003Ch2>Tap 到底在做什麼\u003C\u002Fh2>\u003Cp>Tap 的核心概念很直白。先讓 AI 找出步驟，再把步驟固定下來。這樣一來，模型不必每次都從零推理。它只負責「發明流程」，不是「每次執行」。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1775182721891-gcta.png\" alt=\"Tap 把瀏覽器操作變成程式\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>這種做法對開發者很友善。因為你拿到的是程式，不是一次性的對話紀錄。程式可以看、可以版控、可以測試。出問題時，也比較好查。\u003C\u002Fp>\u003Cp>Tap 的流程通常分三段。F\u003Ca href=\"\u002Fnews\u002Fcursor-3-parallel-agents-design-mode-zh\">or\u003C\u002Fa>ge 階段讓模型觀察頁面並寫出程式。Verify 階段會拿不同輸入去測。Run 階段就直接重播，不再呼叫模型。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Forge：\u003C\u002Fstrong>模型讀頁面，產生 Tap 程式。\u003C\u002Fli>\u003Cli>\u003Cstrong>Verify：\u003C\u002Fstrong>用不同輸入測腳本穩不穩。\u003C\u002Fli>\u003Cli>\u003Cstrong>Run：\u003C\u002Fstrong>直接執行，不再付 AI 成本。\u003C\u002Fli>\u003Cli>\u003Cstrong>重點：\u003C\u002Fstrong>第一次花錢，之後省錢。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>作者給的經濟例子也很直接。第一次可能要花約 0.50 美元。之後每次重跑是 0 美元。這不是理想圖。這是很現實的成本結構。\u003C\u002Fp>\u003Cp>我覺得這裡最有意思的地方，不是省多少而已。是它把「模型推理」和「工作執行」拆開了。這樣你才知道哪裡慢，哪裡壞，哪裡要修。\u003C\u002Fp>\u003Ch2>為什麼這種模型有意思\u003C\u002Fh2>\u003Cp>多數 browser ag\u003Ca href=\"\u002Fnews\u002Fopenai-anthropic-eye-historic-ipos-zh\">en\u003C\u002Fa>t 都像聊天機器人。你丟任務給它，它一邊看頁面一邊想。這沒錯，但每次都要重新思考。對重複工作來說，這種模式很浪費。\u003C\u002Fp>\u003Cp>Tap 的想法比較像編譯器。模型先把自然語言和頁面狀態，翻成可執行腳本。之後就是一般程式執行。這很適合每日抓榜單、填表單、查庫存、巡檢後台。\u003C\u002Fp>\u003Cp>Tap 作者提到，它有 8 個核心操作，外加 17 個內建操作。數字不算誇張，但夠用了。重點是 runtime 只要實作 8 個方法，就能吃到後面那堆能力。這種抽象很工程。\u003C\u002Fp>\u003Cblockquote>“Programs should be used to express the details that humans have already figured out.” — Peter Norvig, \u003Ca href=\"https:\u002F\u002Fnorvig.com\u002F21-days.html\" target=\"_blank\" rel=\"noopener\">Teach Yourself Programming in Ten Years\u003C\u002Fa>\u003C\u002Fblockquote>\u003Cp>這句話很適合 Tap。人已經把流程摸熟了。那就別每次都叫模型重新想。把細節交給程式，才是比較穩的做法。\u003C\u002Fp>\u003Cp>這也解釋了為什麼 Tap 比純 agent 更適合 production。當腳本壞掉時，你看的是程式和頁面狀態。不是再丟一次 prompt，然後祈禱模型換個走法。\u003C\u002Fp>\u003Ch2>跟 Playwright 比，差在哪\u003C\u002Fh2>\u003Cp>最直接的對照組是 \u003Ca href=\"https:\u002F\u002Fplaywright.dev\" target=\"_blank\" rel=\"noopener\">Playwright\u003C\u002Fa>。它本來就是很多團隊的標準工具。穩、完整、文件多。Tap 沒想取代它。Tap 比較像把 AI 的那一段搬到前面。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1775182720318-mavd.png\" alt=\"Tap 把瀏覽器操作變成程式\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>Tap 可以跑在 \u003Ca href=\"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fextensions\" target=\"_blank\" rel=\"noopener\">Chrome Extension\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fplaywright.dev\" target=\"_blank\" rel=\"noopener\">Playwright\u003C\u002Fa>，也能走 macOS 的原生 accessibility API。這點很重要。因為同一份生成腳本，可以落在不同 runtime。\u003C\u002Fp>\u003Cp>另外還有 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FLeonTing1010\u002Ftap-skills\" target=\"_blank\" rel=\"noopener\">tap-skills\u003C\u002Fa>。作者說裡面有 119 個 community skills，涵蓋 55 個網站。這種技能庫很像現成模板。對實務很有幫助。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Playwright：\u003C\u002Fstrong>人寫腳本，控制力高。\u003C\u002Fli>\u003Cli>\u003Cstrong>Tap：\u003C\u002Fstrong>AI 先寫腳本，之後重播。\u003C\u002Fli>\u003Cli>\u003Cstrong>tap-skills：\u003C\u002Fstrong>119 個技能，55 個網站。\u003C\u002Fli>\u003Cli>\u003Cstrong>Tap 優勢：\u003C\u002Fstrong>重跑時不用再叫模型。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>如果你的工作流一天跑 100 次，差異就很明顯。P\u003Ca href=\"\u002Fnews\u002Fclaude-code-leak-vidar-malware-github-zh\">la\u003C\u002Fa>ywright 省的是人力。Tap 省的是人力和推理費。當任務穩定時，這筆帳會越來越漂亮。\u003C\u002Fp>\u003Cp>但也別想太美。網站版型一改，生成腳本還是會壞。這不是魔法。它只是把不必要的 AI 呼叫拿掉，沒有把網頁變成永遠不變。\u003C\u002Fp>\u003Ch2>實際上誰會用到\u003C\u002Fh2>\u003Cp>Tap 最適合重複性高的工作。像內部儀表板、客服後台、排行榜、商品頁巡檢，還有每天固定抓資料的流程。這些場景很吃穩定和成本。\u003C\u002Fp>\u003Cp>它也適合團隊裡已經有 Playwright 經驗的人。因為 Tap 產生的東西最後還是可執行程式。你不用接受一個黑盒 agent。你拿到的是能進 Git 的東西。\u003C\u002Fp>\u003Cp>安裝流程也蠻輕。先跑 shell script，再下像 \u003Ccode>tap github trending\u003C\u002Fcode> 或 \u003Ccode>tap hackernews hot\u003C\u002Fcode> 這類指令。這種命令風格很像小型 compiler toolchain。乾脆，不囉嗦。\u003C\u002Fp>\u003Cp>如果你在做資料蒐集，這種模式很有吸引力。第一次讓模型理解頁面。之後就直接批次跑。對比一直呼叫 LLM，成本和延遲都更好控。\u003C\u002Fp>\u003Cp>我覺得它最像的不是 agent。比較像把 AI 當成一次性的程式生成器。這個定位很務實，也很符合很多團隊的日常需求。\u003C\u002Fp>\u003Ch2>產業脈絡跟下一步\u003C\u002Fh2>\u003Cp>過去兩年，browser automation 一直在往兩條路走。一條是純腳本。像 Playwright、Selenium。另一條是 agent 化。靠 LLM 看頁面，再自己決定怎麼點。\u003C\u002Fp>\u003Cp>問題是，agent 很方便，但也很貴。每次都要推理，速度慢，debug 也麻煩。Tap 這種工具，剛好站在中間。它保留 AI 的理解能力，也保留程式的可控性。\u003C\u002Fp>\u003Cp>這種中間路線，對台灣團隊其實很實用。很多公司不是要做炫技 demo。是要穩穩抓資料、跑流程、接內部系統。這時候，能省 inference cost 的工具，就會很有感。\u003C\u002Fp>\u003Cp>如果 Tap 之後把技能庫繼續擴大，runtime 也更穩，我猜它會更像一個「瀏覽器任務編譯器」。不是每個任務都要 agent 即時思考。很多任務，只要第一次想對，後面就該交給程式。\u003C\u002Fp>\u003Ch2>結語：先想一次，再跑一百次\u003C\u002Fh2>\u003Cp>Tap 最有價值的地方，是把 AI 放在第一次。後面就交給可重播的程式。這樣做，成本低，速度快，也比較好維護。\u003C\u002Fp>\u003Cp>如果你現在就在做瀏覽器自動化，我會建議你直接問一個問題：這個任務，是不是每次都在重複同一套動作？如果答案是肯定的，Tap 這種模式就很值得試。\u003C\u002Fp>\u003Cp>我的預測很簡單。接下來會有更多團隊，把 LLM 當成程式生成器，而不是天天在線的操作員。因為講白了，重複工作不需要每次都重新思考。\u003C\u002Fp>","Tap 把一次性的 AI 瀏覽器操作，轉成可重播的程式。重跑不用再付模型費，適合重複登入、抓資料、跑表單的工作流。","dev.to","https:\u002F\u002Fdev.to\u002Fleonting1010\u002Fprograms-beat-prompts-how-tap-turns-ai-into-a-compiler-for-browser-automation-oab",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1775182721891-gcta.png",[13,14,15,16,17,18,19,20],"Tap","browser automation","Playwright","LLM","AI cost","Chrome Extension","macOS","program synthesis","zh",1,false,"2026-04-03T02:18:25.48096+00:00","2026-04-03T02:18:25.454+00:00","done","a0565380-2a92-4487-8ac2-e80c619cfeef","tap-browser-automation-programs-zh","ai-agent","586d7fcd-daae-4798-a525-62406c8b8a48","published","2026-04-07T07:41:12.412+00:00",[34,36,38,40,42,44,46,48],{"name":19,"slug":35},"macos",{"name":15,"slug":37},"playwright",{"name":18,"slug":39},"chrome-extension",{"name":16,"slug":41},"llm",{"name":14,"slug":43},"browser-automation",{"name":17,"slug":45},"ai-cost",{"name":13,"slug":47},"tap",{"name":20,"slug":49},"program-synthesis",{"id":30,"slug":51,"title":52,"language":53},"tap-browser-automation-programs-en","Tap Turns Browser Actions Into Programs","en",[55,61,67,73,79,85],{"id":56,"slug":57,"title":58,"cover_image":59,"image_url":59,"created_at":60,"category":29},"e7874ed9-592f-4e06-b7b7-ab733fe779db","claude-agent-dreaming-outcomes-multiagent-zh","Claude 幫 Agent 加了做夢功能","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778868642412-7woy.png","2026-05-15T18:10:24.427608+00:00",{"id":62,"slug":63,"title":64,"cover_image":65,"image_url":65,"created_at":66,"category":29},"38406a12-f833-4c69-ae22-99c31f03dd52","switch-ai-outputs-markdown-to-html-zh","怎麼把 AI 輸出改成 HTML","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778743243861-8901.png","2026-05-14T07:20:21.545364+00:00",{"id":68,"slug":69,"title":70,"cover_image":71,"image_url":71,"created_at":72,"category":29},"c7c69fe4-97e3-4edf-a9d6-a79d0c4495b4","anthropic-cat-wu-proactive-ai-assistants-zh","Cat Wu 談 Claude 的主動式 AI","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778735455993-gnw7.png","2026-05-14T05:10:30.453046+00:00",{"id":74,"slug":75,"title":76,"cover_image":77,"image_url":77,"created_at":78,"category":29},"e1d6acda-fa49-4514-aa75-709504be9f93","how-to-run-hermes-agent-on-discord-zh","如何在 Discord 執行 Hermes Agent","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778724655796-cjul.png","2026-05-14T02:10:34.362605+00:00",{"id":80,"slug":81,"title":82,"cover_image":83,"image_url":83,"created_at":84,"category":29},"4104fa5f-d95f-45c5-9032-99416cf0365c","why-ragflow-is-the-right-open-source-rag-engine-to-self-host-zh","為什麼 RAGFlow 是最適合自架的開源 RAG 引擎","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778674262278-1630.png","2026-05-13T12:10:23.762632+00:00",{"id":86,"slug":87,"title":88,"cover_image":89,"image_url":89,"created_at":90,"category":29},"7095f05c-34f5-469f-a044-2525d2010ce9","how-to-add-temporal-rag-in-production-zh","如何在正式環境加入 Temporal RAG","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778667053844-osvs.png","2026-05-13T10:10:30.930982+00:00",[92,97,102,107,112,117,122,127,132,137],{"id":93,"slug":94,"title":95,"created_at":96},"4ae1e197-1d3d-4233-8733-eafe9cb6438b","claude-now-uses-your-pc-to-finish-tasks-zh","Claude 開始幫你操作電腦","2026-03-26T07:20:48.457387+00:00",{"id":98,"slug":99,"title":100,"created_at":101},"5bede67f-e21c-413d-9ab8-54a3c3d26227","googles-2026-ai-agent-report-decoded-zh","Google 2026 AI Agent 報告解讀","2026-03-26T11:15:22.651956+00:00",{"id":103,"slug":104,"title":105,"created_at":106},"2987d097-563f-46c7-b76f-b558d8ef7c2b","kimi-k25-review-stronger-still-not-legend-zh","Kimi K2.5 評測：更強，但還不是神作","2026-03-27T07:15:55.277513+00:00",{"id":108,"slug":109,"title":110,"created_at":111},"95c9053b-e3f4-4cb5-aace-5c54f4c9e044","claude-code-controls-mac-desktop-zh","Claude Code 也能操控 Mac 了","2026-03-28T03:01:58.58121+00:00",{"id":113,"slug":114,"title":115,"created_at":116},"dc58e153-e3a8-4c06-9b96-1aa64eabbf5f","cloudflare-100x-faster-ai-agent-sandbox-zh","Cloudflare 的 AI 沙箱跑超快","2026-03-28T03:09:44.142236+00:00",{"id":118,"slug":119,"title":120,"created_at":121},"1c8afc56-253f-47a2-979f-1065ff072f2a","openai-backs-isara-agent-swarm-bet-zh","OpenAI 挺 Isara 的 agent swarm …","2026-03-28T03:15:27.513155+00:00",{"id":123,"slug":124,"title":125,"created_at":126},"7379b422-576e-45df-ad5a-d57a0d9dd467","openai-plan-automated-ai-researcher-zh","OpenAI 想做自動化 AI 研究員","2026-03-28T03:17:42.090548+00:00",{"id":128,"slug":129,"title":130,"created_at":131},"48c9889e-86df-450b-a356-e4a4b7c83c5b","harness-engineering-ai-agent-reliability-2026-zh","駕馭工程：從「馬具」到「作業系統」，AI Agent 可靠性的終極密碼","2026-03-31T06:42:53.556721+00:00",{"id":133,"slug":134,"title":135,"created_at":136},"e41546b8-ba9e-455f-9159-88d4614ad711","openai-codex-plugin-claude-code-zh","OpenAI 把 Codex 放進 Claude Code","2026-04-01T09:21:54.687617+00:00",{"id":138,"slug":139,"title":140,"created_at":141},"96d8e8c8-1edd-475d-9145-b1e7a1b02b65","mcp-explained-from-prompts-to-production-zh","MCP 怎麼把提示詞變工作流","2026-04-01T09:24:39.321274+00:00"]