實戰案例：用SOLO Coder 打造一個「網頁轉Markdown」瀏覽器插件 除了做網站，我日常寫的小工具就是瀏覽器外掛。這幾天我嘗試用TRAE SOLO 模式寫了一個把網頁內容抓成Markdown 的小插件，就很方便。 我在使用TRAE 這種Coding Agent 寫入瀏覽器插件時也累積了一些經驗技巧： - 使用框架： 最好使用wxt 這樣專為瀏覽器插件打造的框架，可以節省許多從頭開始建造的時間。 - 從Example 開始： 不要直接讓Agent 從頭創建，因為Agent 的訓練時間相對比較早，很多函式庫更新又很頻繁。這個WXT + React + Tailwind + Shadcn 的專案就很合適：https://t.co/RF9Q0SAZlH - 先Plan 後執行： 我習慣了先讓SOLO幫我計畫再執行，不要急著讓Agent 直接動手寫程式碼。 - 人工回饋： 因為像瀏覽器插件Agent 不能直接幫你存取調試，所以需要你自己測試，並且把錯誤結果貼給Agent。 這是我當初實現時用到的提示詞，有興趣你也可以試試看： --- 提示詞開始--- 請幫我實作一個瀏覽器插件，點開後，可以抓取目前網頁的：標題、連結、網頁內容為Markdown，參考截圖（註：配圖2）。 - 最大尺寸400x600 - TItle 最多顯示一行（超長的顯示省略號） - Properties 內的Meta 資訊最多顯示為1行（超長的顯示省略號） - 顯示網頁內容Markdown部分撐滿剩餘空間，內容太長可以捲動 - 下面有個複製按鈕，點擊後可以複製為完整Markdown內容（title+content+source url) - 注意確保外掛程式有正確的網頁存取權限，能存取網頁內容 技術棧： - wxt：插件框架 - Tailwindcss + shadcn ui: UI - 請直接下載這個範例專案（https://t.co/RF9Q0SAZlH） 開始，注意是wxt-dev/examples/tree/main/examples/react-shadcn 這個目錄下的完整內容，不需要其他無關內容 --- 提示詞結束--- 有了SOLO 正式版之後，我把這個提示詞用SOLO Coder 重新做了一遍，遇到的錯誤明顯少了，生成速度也快了一些。 開啟Plan 模式後，它會先制定計劃，最好人工Review 一下計劃有沒有問題，沒問題再開始執行。 第一次可能會失敗，把結果送回去讓它修復。大概需要反覆迭代幾次，就可以得到結果了。 如果完成後你不知道怎麼用，還可以問Agent 怎麼發佈、使用，或乾脆讓它寫成文件。 這個用TRAE SOLO 模式打造的小專案已經發佈到了GitHub：
最後：我的幾點看法 SOLO 模式整體用下來，對於不太習慣用cli 模式的來說，應該會方便很多： - 可以方便的輸入和編輯提示詞、貼上圖片。 - 可以隨時用滑鼠停止、切換模式。 - DiffView 可以方便看程式碼更新，Browser 可以即時看到網頁效果。 對於習慣了用cli 模式的，這些優點倒沒有那麼明顯，但能和瀏覽器連動對於做網頁應用來說還是方便很多。 最後聊聊計費，TRAE 在Token 用量上還挺慷慨的。近期SOLO 改成了採用基於Token 消耗的計費方式，折算為快速問答次數（Fast Request）從會員套餐中扣減。每輪對話結束後，IDE 內對話方塊底部和TRAE 官網的Usage 頁面將清楚顯示本次消耗詳情。 推薦大家去試試，尤其是可以試試我上面提到的SubAgent 的用法，或是參考我上面分享的提示詞，自己寫一個瀏覽器外掛來試試。 TRAE國際版官網：https://t.co/rF5s0uF53p https://t.co/wQXKquMgqg