前陣子收到了 Github Copilot 的年繳帳單，突然想到最近好像很少用它做了什麼功能，現在 AI Agent 大爆發，任何開發都入門都簡易化了。
於是就想著用 AI Vibe Coing 一下，開始盤點之前有做那些想一半就放棄的功能。
於是就先跑了這個 LinkEveryWord ，這功能的主體就是 我想在瀏覽網頁的時候，快速查到我電腦裡面的資料，這樣我比較追蹤這東西我到底抓了沒，或是是否有沒有這個檔案的存在，需求很小眾，但是實作起來很難。
為何有這個需求，限制又是哪些
對一個有數位囤物症的我來說，在電腦裡面下載或是安裝一些東西都算是稀鬆平常的事情，電腦常常又會堆積著大量用不到的檔案或是已經抓過的重複檔案。這點對我來說相當的困擾。如果我在手殘要下載之前可以快速比對一下電腦裡面有沒有安裝或是下載，這樣可以阻擋我點下去下載的需求。
由於電腦規則的設計，當你用瀏覽器的時候，大部分情況下瀏覽器是讀取不到你電腦內的檔案的，所以需要 Chrome 擴充元件跟其他應用程式的溝通才有辦法在瀏覽器中呈現你要的資料
以下是開發的碎念，安裝跟使用方式介紹可以跳到 #安裝 環節
開工準備
有了明確的需求，要開工就會很快。這次為了試驗各個 AI 的實力，我大概聽過的 AI 都稍微碰了一下，最後我只挑幾個常用的來說明。
我在很久以前就知道我用的一款 Windows 應用程式 Everything 可以快速地找到我要的檔案，該應用程式也推出了一個串接的 SDK可以參考。我首先用 GitHub Copilot 直接丟網址給 AGENT 閱讀，並跟我確認規劃功能。
可能這個對 AI 來說真的算小 CASE，結果 AGENT 一邊規劃一邊把功能給實作完畢。我看功能沒太大問題，就直接把專案切成 Monorepo 的形式分了三個目錄存取，結果這樣的規劃讓我後續的功能部屬一直受到阻礙。
接著，我利用 AI 產生我的需求，之後用 gemini cli 直接讀取需求，針對另外兩個目錄寫出 README.md，以便我查閱後續的需求跟目的開發。本來是想先規劃再開工，沒想到最小 POC 直接實現，所以後面就根據這個 POC 延伸寫完需求內容一次開發。
Chrome 套件開發
雖然這個已經有不少經驗，不過距離我最近一次發布的 Chrome 擴充套件已經是十年前了。近期開發的功能則是停滯的狀態，這個需求比較簡單，我需要往本地端呼叫一個 AJAX 查詢，讓使用者可以設定項目。因此我直接使用 GitHub Copilot 開發，建立 plasmo + shadcn，並根據我的需求產出內容、閱讀頁和設定頁，還有快捷鍵註冊，這大概幾小時就搞定了。最多的時間還是微調跟桌面應用程式的串接格式定案。
因為怕 Chrome 審核太久，我直接打包一版手動上架審核。審核需求的內容，我叫 gemini cli 讀取我的 README 跟設計檔案，把 Chrome 要審核的內容直接生成。至於為什麼使用 gemini 產出，因為只有 Google 最懂 Google XD。
審核大概花了兩天就 PASS 了。在這兩天期間，我又用了 GitHub Copilot 根據 Cloudflare Pages 的規則，產出 Hono 的網站設計，並設計簡單的部屬，產生 Chrome 所需要的權限政策網址（我後來才看到有網友直接用 GitHub 倉庫的 md 產生，萬萬沒想到）。
自動發布策略 (CICD)
應用程式、Chrome 套件和介紹網站都好了，接下來最難搞的就是自動發布策略 (CICD)。這幾天上班，我直接開啟 Google Jules 幫我把各個 README 根據已經實現的功能重新發布，一共微調了四五次，接著請它根據我的專案架構擬定一個 CICD 的發布流程。在此期間，我詢問過每日免費的 GPT-5 跟 gemini chat 擬定策略，確定好後再給 Jules。否則他思考很慢還需要多次確認。
應用程式大約排除掉路徑跟打包的檔案內容，測試個四五次就可以搞定。最麻煩的是 Chrome。我原本是想，我以後的桌面應用程式更新，線上WEB也直接更新版號跟更新進度內容，Chrome 擴充元件亦然，但要實作之後才想到 Chrome 發布需要審核。結果我將過程改為 Chrome 變更內容增加版號才自動上 Tag 推版，首先針對桌面應用程式完成，再分資料夾。
最開始的 Agent 在增加 gitignore 的時候不小心將 lib/、lib64/ 都加進去了，導致套件發送版本打包一直失敗，一般的 Agent 在測試時根本測不出差異，本地端 act 測試也都是正常的。後來用 GitHub Copilot 的 GPT-5 模型來全掃描，才抓到這個問題。最終，配置對應的 Google OAuth版本授權和 KEY，成功上傳了。
安裝說明
首先到商店安裝 Chrome 套件 ，安裝完畢之後 設定->LinkEveryWord 詳細資料->擴充功能選項
在設定的地方，可以設定其他網址，方便未來其他應用程式的擴充，這邊直接 “開啟Chrome快捷鍵設定頁面” ，找到 LinkEveryWord ，看到 “Open LinkEveryWord search panel” 框框，按下筆形圖案錄入你想紀錄的快捷鍵，這樣就可以使用這個快捷鍵呼叫 右側結果區塊
接著還要 應用程式的配合，到 github page 的 releases 清單，抓取最新的 zip ，下載下來解壓縮，執行 EverythingFlaskSearch.exe，就會自動叫出瀏覽器開啟搜尋的臨時網頁
這個東西等同是 Everything 的本地端網頁版，當然你如果自已會部屬的話也可以把家裡電腦架設主機配置遠端IP ，在公司搜尋家裡的檔案 ( 但是不能看) 這算是額外自己配置的功能，如果想要開機自動啟動可以用 NSSM 或是 ServiceEx ，這兩種都可以自動開機啟動。
到現在啟動並配置完成，功能就完畢了。
結語
目前這個小專案算是我一個實驗 Vibe 到底可以做到那些事情的一個小過程
這個專案我用了 微軟的 Microsoft Copilot 幫我產生 Logo，用線上的影像工具幫我放個首圖，應用程式的 ICON 用了 X-ICONEDITOR 把 PNG轉 ICON ，專用的工具還是要專業的來。用了 recraft.ai 把 PNG轉成 SVG，方便日後引用
採用 google jules 梳理 README，用 Github Copilot 撰寫主要程式，最後用 Kiro 免費額度修正網頁的樣式跟排版內容，最後 github action 線上部屬如果出錯的時候，也有 AI 可以直接提供意見，相當方便。
最後網站利用 Cloudflare pages 佈署，每日十萬次查詢次數，不用負擔主機相當方便，相當適合一些小專案實踐
最後再放一次我的專案網站
