先上GitHub連結給懶得看廢話的捧油 Chrome_newsTitle_extension

一、 前言

這篇文來想我地第一次使用AI寫程式的經歷，算一算也快一年前了，當時受到朋友Leo的啟發，說AI寫程式有多好用，那時連Vibe coding這個詞都還沒有，身為從業人員對AI還是挺懷疑的，頂多偶爾當另一個google用。後來陸續看到許多成功案例，於是開始思考是不是可以用AI來做一些project？順應時代也是很重要的。

1.1 初次嘗試

一開始想的是實現好幾年前發想的二維條碼專案，做不出來是因為涉及到太多我不會的領域了，要寫影像辨識、APP、資料庫，對我這個寫韌體的太複雜了。但是試做了一下，APP框架很容易生成，但是影像辨識卻很難做，一下子就被循環Bug卡住了，我也沒有能力解，於是就繼續放著，等以後對AI更熟悉再撿回來做吧。

二、 開發背景

回到主題，後來想到這個比較單純的小工具，我每天都會用google news或是bing news(windows 常常跳出來就加減看，不要噴我XD)，但是總有很多釣魚式標題讓人看了很不爽，看了一堆沒用的資訊，就是要釣你看最後的兩句話，結果發現根本沒什麼，或是根本沒有答案，真的很沒品。防範釣魚標題輕鬆學——什麽是釣魚標題？

(來源:解析「誘餌式標題」：來自閱聽人的一段獨白)

不過這也不是什麼偉大的project，可以不用給新聞網賺流量或是打擊不良記者，目標只是可以讓我看到有良心的標題而已，不要浪費我的時間。

三、 開發過程

這個專案分三個部分，第一個是Chrome的插件、第二是AI串接、最後是UI/UX的調整，插件框架AI來說完全沒有難度，簡單的prompt就可以生成，有問題基本上也都可以解決。

3.1 背景分頁機制

第一個遇到的問題是要把新聞丟給AI API的流程，首先是AI常常不能直接解析連結URL，或是會直接唬爛，再來是許多連結會自動跳轉，簡單點個連結後面都牽涉一堆瀏覽器動作、加密驗證、等待跳轉等等，跳轉的機制千奇百怪，光一個Google news的跳轉機制就搞死我，差點就要放棄。後來我想到一個萬用的解法！不如就直接真的點開連結吧！

於是基本流程就變成點連結(alt+右鍵) --> 觸發插件在背景打開分頁 --> 等分頁載入完成 --> 關閉分頁，將內容丟給AI --> 分析完回傳結果，這樣的好處是完全不用管後端怎麼拿到網頁內容，而且在任何網站都可以用，只要你原本能點的連結都可以！

3.2 處理字數限制與 Prompt 的不確定性

第二個問題是AI的使用，API有時不穩定，速度也不甚理想，但這個也只能多試試不同的模型，比較麻煩的是字數，就算已經只取內文，還是常常顯示超過字數，於息我想到只取前後的辦法，因為釣魚文的重點通常都只有最前面跟最後面，引此我改成超過字數時，就從中間的文字開始砍，只將重點丟給AI整理。

Prompt的部分也試過好幾個，有些prompt產出不穩定，有些AI常常會直接唬爛答案，還有AI最愛的一堆廢話前言(以下是幫你整理的新聞摘要，不廢話...或是這個版本，也許你會喜歡 = =)，只能說AI還是很常不可控。

3.3 UI/UX

最後是UI/UX的調整，這就很看個人了，多重觸發、保留連結的功能我覺得挺好用的，還有UI介面也跟HTML、CSS奮戰了一陣子，多虧我以前有學過一點，雖然沒有很fancy，但至少我看起來還舒服，AI產生的文字提示前面一定要有emoji，看了挺火大的，我還要一個一個改。

以下是整個project的簡單流程圖

四、 結語與成果分享

就這樣，希望有需要的人用的愉快😁

附上GitHub連結，如何時用請參考ReadMe囉
Chrome_newsTitle_extension