前情提要​

身為一個 Chrome Extension 開發小白，不知道從何開始也是很正常的事，但手邊剛好有一個需求，評估可以用 Chrome Extension 來解決，於是就開始了這個小專案。
現在正值 LLM 風頭浪尖上，運用 Vibe Coding 來開始一個 Chrome Extension 的開發，感覺是個不錯的選擇，也大大的降低了入門的門檻與學習的成本。

Let's GO​

[開發環境] Visual Studio Code 開發必備的工具，我使用的是 Roo-Code 這個套件， Visual Studio Code 跟 Roo-Code 網路上有太多實用的說明，這邊就不做介紹了。

[開工] 首先建立一個新的資料夾，然後在 Visual Studio Code 中開啟這個資料夾，接著在 Roo-Code 的介面中，選擇「 Code 」模式，然後催動咒語：

實作一個 Chrome extension，目的是要讓使用者可以把網頁中選取的文字範圍透過 Selector 定位起迄並紀錄下來，再下次進入這個網頁的時候，可以透過先前紀錄的 Selector 定位出選取的文字範圍，並將文字內容複製到剪貼簿裡。
以下是各功能的描述
1. 網頁中選取文字時，會有浮動按鈕出現在滑鼠指標旁，點擊按鈕可以紀錄選取範圍的起迄 Selector 並依當前網址為集合儲存起來
2. popup 頁面中，如果沒有儲存過任何紀錄，要提示使用方式，如果有儲存過，則列舉出 selector ，每筆紀錄只顯示一行其餘的內容用 overflow hide 搭配捲軸的方式呈現，每筆紀錄下面提供以下功能
「複製」: 透過起迄 selector 複製選中的文字
「選取」: 透過起迄 selector 模擬文字選取
「編輯」: 讓使用者編輯起迄 selector 
「刪除」: 將該筆紀錄刪除
3. 選項頁面，在此頁面中做全域的設定，依不同網頁列出該網頁中的所有紀錄，每筆紀錄要提供編輯與刪除的功能

施咒畫面

然後就是一連串的跑跑跑，如果沒有自動核准，就是時不是要去按一下核准按鈕

全部跑完之後，就自動長出了一堆程式，過程中到底跑了什麼就不一一細說了，因為 LLM 就是會有他的隨機性，可能每次跑出來的程式碼都不太一樣，但大致上「應該」都是符合我們的需求吧?。

接下來當然就是實測的環節了，再一次身為 Chrome Extension 開發小白的我，當然還是要問一下，怎麼開始部署測試囉。

[佈署] 先把 Mode 切到 Ask 模式，然後問一下 Roo-Code：

怎麼把這個擴充功能掛進 Chrome 裡測試

好樣的，連路徑什麼的都幫我寫好了，直接照著做就對了。
絲毫不費力的就要把擴充功能掛進 Chrome 裡了，但代誌不是憨人想得那麼簡單，不出意外的話馬上就要出意外了。

會出意外這檔事，我們本來就不意外了，一樣把錯誤訊息貼上去，然後問 Roo-Code ，模式直接選 Code ，讓他幫我們修正。

無法載入擴充功能
檔案
~/Local Workspace/GitHub/Chrome extension/HiTextClip2
錯誤
無法載入背景指令碼「background.js」。
無法載入資訊清單。

乖乖，直接幫我開一個空的 background.js ，裡面還幫我註解說「目前無需特殊背景邏輯，保留空檔案供 manifest 使用」。
Roo-Code 處理完之後，擴充功能就成功掛進去 Chrome 了，
但意外還是接踵而來，該有的功能沒出現，打開 DevTools 發現有錯誤：

接著不管出什麼錯，一律丟進去叫 Roo-Code 改：

然後他就成功了，但選取多行文字的時候，浮動按鈕飄得有點遠。

再次 Vibe Coding 一下，讓他幫我調整一下浮動按鈕的位置：

浮動按鈕在選取多行文字的時候，沒有出現在滑鼠游標旁邊

然後整個過程就是這樣，反覆逐步的修正錯誤，直到功能都正常為止。
過程中要注意的是， Prompt 要下得夠精準，這樣 LLM 才不會跑去錯的地方亂改一通， 再來就是，雖然有機會可以修到全部都正常，但其實還是要自己去看一下程式，因為在反覆的過程中，會殘留下很多我們意想不到的垃圾程式碼禮物。

結語​

快！真的快，很厲害，著實是節省了不少時間，但也真的是要注意，不要留下技術債，畢竟 LLM 生成的程式碼，還是有可能會有一些不符合預期的地方。

前情提要​

昨天提到 macOS 怎麼在 Console 中用指令使用剪貼簿的內容，因為平時工作是雙平台混合使用，所以好奇，在 Windows 下是不是有相應的實作，簡單的 搜尋 研究一下。

Nushell 上場​

首先，如何透過 Console 的命令取得剪貼簿的內容呢？ 我 google 了一下，有找到幾種方式，一種是透過 PowerShell 的 Get-Clipboard ，一種是透過安裝 pasteboard ，還有其他的，但沒啥時間研究，先就這兩種分別說明。

PowerShell Get-Clipboard​

這個方法比較單純，不需要額外安裝其他工具。
先把要處理的內容複製到剪貼簿中，接著打開 Nushell 並輸入這樣的指令

powershell get-clipboard | lines

然後我們就會得到這樣的錯誤訊息

編碼錯誤， Nushell 建議我們用 decode 去處理非 UTF-8 的字元

powershell get-clipboard | decode | lines | split column --regex "[:,]"

完美

接著再把結果輸入到剪貼簿中就可以打完收工了，輸入到剪貼簿這個動作，可以透過 Windows 內建的 Clip 指令完成

powershell get-clipboard | decode | lines | split column --regex "[:,]" | to csv -s "\t" | clip

執行完這行指令後，一樣沒有輸出，因為被導向剪貼簿裡面，立馬貼出來看看結果，於是我們就會得到 一堆亂碼 。

果然，怎麼來就要怎麼回去，加上編碼讓他轉回去 Big5 ，調整一下指令

powershell get-clipboard | decode | lines | split column --regex "[:,]" | to csv -s "\t" | encode big5 | clip

貼上 Excel ，打完收工

安裝 pasteboard 使用 pbpaste & pbcopy​

這個方法只差需要安裝程式，其他就跟 macOS 沒啥太大的差別(當然還是要處理編碼)。
安裝的部份我選擇用 Chocolatey ，細節請看 這裡 。

choco install pasteboard

剩下的就參考 昨天的指令 ，這裡就不多贅述了。

參考資料​

• https://ss64.com/ps/get-clipboard.html
• https://ss64.com/nt/clip.html
• https://community.chocolatey.org/packages/pasteboard#testingResults
• https://www.thinkinmd.com/post/2020/02/21/command-prompt-and-windows-powershell-default-use-utf-8/

前情提要​

dotnet-script 是一個可以把 C# 當成腳本執行的工具，我們可以簡單的寫一些 C# 的程式，不需要編譯，直接就可以執行，也可以在腳本程式中，指定要安裝的 nuget 套件，載入更多擴充功能，十分的好用。
但有一個問題，在 Linux 或 macOS 的環境下，可以透過 Shebang 的方式，在 Console 中直接執行，但 Windows 不行，本篇文章會說明如何在 Windows Console 中，直接執行 csx 腳本，但針對如何安裝 dotnet-script 就不多加著墨，相關細節，請參考 這裡 。

Let's GO​

首先，我們需要知道 dotnet-script.exe 的所在位置，輸入下面指令可以得到

where dotnet-script.exe

接著，我們在這個位置裡面，新增一個 dotnet-script.cmd 的檔案，檔案內容如下圖

@dotnet-script.exe %*

最後就是 .csx 關聯到 dotnet-script 開啟，在 Console 提示列下輸入下面兩行指令

assoc .csx=csxfile
ftype csxfile="C:\Users\[USER]\.dotnet\tools\dotnet-script.cmd" "%1" %*

完成之後，就可以來試試看囉

參考資料​

• https://github.com/dotnet-script/dotnet-script
• https://learn.microsoft.com/zh-tw/windows-server/administration/windows-commands/assoc
• https://learn.microsoft.com/zh-tw/windows-server/administration/windows-commands/ftype

前情提要​

工作中，時常會複製一堆文字資料到剪貼簿中，再貼到文字編輯器上做後製，如果這沱資料有表格結構到也好處理，偏偏有時候，它們就是一整沱：

天空:藍色,白雲:飄動
海浪:翻滾,沙灘:溫暖
星星:閃爍,夜空:寧靜
風:輕拂,樹葉:搖曳
花:盛開,香氣:四溢
山:巍峨,雲霧:繚繞
河流:奔騰,清澈:見底
雨:滴落,傘下:細語
日出:曙光,晨曦:初現
城市:繁華,燈火:輝煌

如上逗號的前後都有一組 Key:Value 的資料，
想要把他們做成四欄資料放到 excel 上面去，有很多方式可以處理，
但我常常在想，如果可以複製進剪貼簿後，再貼出來，就變成我想要的樣子該有多好。

搭配 Nushell 試試​

Nushell 可以用簡單的指令處理表格的資料，如果可以把剪貼簿的資料傳進 STDIO 讓 Nushell 處理，處理完後再複製回剪貼簿，感覺應該是個不錯的方式。 然後我找到了，在 macOS 下 pbpaste 跟 pbcopy 兩個好用的指令：

pbpaste: 把剪貼簿的內容貼到 STDIO
pbcopy: 把 STDIO 輸出複製回剪貼簿

於是：

pbpaste | lines | split column --regex "[:,]"

接著只要把 table 轉成 Tab 分隔，然後再複製回剪貼簿就大工告成

所以改一下語法

pbpaste | lines | split column --regex "[:,]" | to csv -s "\t" | pbcopy

這個步驟因為是輸出到剪貼簿上，所以 Console 上不會有輸出

然後我們就可以快樂的貼到 Excel 上了：

參考資料

• https://ss64.com/mac/pbpaste.html
• https://ss64.com/mac/pbcopy.html
• https://www.nushell.sh/commands/docs/to_csv.html
• https://www.nushell.sh/commands/docs/split_column.html