自製小工具 on IT 空間

「Packer for GitHub」隨選打包下載瀏覽器擴充功能(Extension)

jia@jiatool.com (Jia) — Sat, 16 May 2026 13:30:00 +0800

前言

因為有時候從 GitHub 下載檔案或資料夾時，並不想整包專案 (Repo 儲存庫) 下載，可能是其他檔案太多、太大，只想下載其中幾項就好。所以之前有安裝 GitZip for github 瀏覽器擴充功能來用。

不過後來在公司，不知道是不是因為同個 IP 人數太多，會被限制，需要登入 GitHub 連結 token 才能使用。
最近一氣之下(是在氣什麼?) 乾脆自己來寫一個，上禮拜六日透過 Vibe Coding 方式完成了這款「Packer for GitHub」瀏覽器擴充功能，最主要的功能就是可直接 checkbox 勾選檔案和資料夾，一鍵打包成 ZIP 下載。

順手花了一點時間，將其上架到 Chrome 應用程式商店，分享給大家~

Chrome 線上應用程式商店：
「Packer for GitHub」擴充功能

「Packer for GitHub - GitHub 隨選打包下載工具」

介紹

前往 Chrome 線上應用程式商店找到「 Packer for GitHub - GitHub 隨選打包下載工具」擴充功能 (Edge 應該也可以安裝使用) 安裝。

「Packer for GitHub」瀏覽器擴充功能

前往 GitHub 內任一個公開或私有儲存庫頁面，滑鼠移到檔案清單 (側邊欄 file tree 也支援) 會出現 checkbox，就可以勾選需要的檔案和資料夾。

右下角出現懸浮視窗，點擊「打包下載」即可。

如此簡單。

勾選檔案和資料夾 > 打包下載

🌟 核心功能

不想為了幾個檔案，而 Clone 下載整個 Repo (儲存庫)？

在 GitHub 原生的介面上，為每個檔案與資料夾加上了直觀的勾選框。讓你直接在網頁上選擇需要的檔案和資料夾，一鍵打包成 ZIP 下載！

精準挑選，一鍵打包：直接在 GitHub 檔案清單中勾選你需要的項目，包含檔案與資料夾。側邊欄 file tree 也支援選取。
支援公開&私有儲存庫：公開儲存庫可直接使用。如果要下載私有儲存庫。只需要設定 GitHub Personal Access Token 即可。
瀏覽器端壓縮：所有的打包壓縮作業（ZIP）都在你的瀏覽器本地完成。不需要伺服器中轉，速度快且保護隱私。
簡單使用：勾選 > 下載，沒有複雜的步驟或設定。

支援「淺色」與「深色」GitHub 主題

如果要下載私有儲存庫，需要設定 GitHub 的 Personal Access Token

🔒 隱私與資安

本地儲存：你的 GitHub Token 僅會儲存在瀏覽器受保護的 chrome.storage 中。甚至沒用到私有儲存庫的話，連 GitHub Token 也不需要。
無伺服器：不會收集、儲存或傳送任何你的紀錄、程式碼。

結語

有需要的話就來安裝使用吧，歡迎給五星好評及留言支持。

如果有任何問題或建議，都可以留言或發 Email 反饋給我~

對生成式 AI 感興趣的讀者，記得追蹤 FB 粉專『 IT空間』，以免錯過最新的發文通知呦~🔔

預測未來最好的方法，就是創造未來。
The best way to predict the future is to invent it.

—— Alan Kay 艾倫·凱 (電腦科學家)

「YouTube 播放清單篩選器」瀏覽器擴充功能(Extension)

jia@jiatool.com (Jia) — Mon, 30 Mar 2026 21:15:00 +0800

前言

不知道大家是不是都一樣，我 YouTube 的「稍後觀看」清單裡面影片數量高達 7、800 部 (我有努力在清了…)，此時有時想過濾某頻道的影片，或有個短時間的空檔，想找 10 分鐘以內的影片填充，原生網頁沒有任何篩選工具，就像大海撈針…

最近我就想到，現在 Vibe Coding 當道，自己做一款這種用途的瀏覽器擴充功能(Extension) 應該不難，因此就誕生出「YouTube 播放清單篩選器」~

Chrome 線上應用程式商店：
「YouTube 播放清單篩選器」擴充功能

「YouTube 播放清單篩選器」瀏覽器擴充功能

介紹

前往 Chrome 線上應用程式商店找到「 YouTube 播放清單篩選器」擴充功能 (Edge 應該也可以安裝使用)。

安裝完成後前往 YouTube 的「稍後觀看」頁面 (或任何「播放清單」頁面)，上方就會出現此工具 UI。

在「稍後觀看」頁面上方會顯示此工具 UI

🌟 核心功能

頻道篩選：自動抓取清單中的所有頻道，只想看哪個特定創作者的影片直接過濾。
影片長度過濾：
- 滑桿控制：自由設定影片時間長度範圍。
- 快捷按鈕：預設「5分鐘內」、「10-30分鐘」…等常用區間，快速過濾。
關鍵字搜尋：輸入關鍵字，搜尋影片標題和頻道名稱。
多種排序：支援依影片時長、觀看次數、頻道名稱進行升序/降序排列。
全自動加載：一鍵加載所有播放清單影片，無需手動慢慢向下滾動。
色彩主題：支援「淺色」與「深色」主題，自動依照你 YouTube 的設定切換。
佈局優化：提供「預設」與「緊湊」兩種顯示佈局，「緊湊」模式可以在相同畫面下呈現更多影片。

支援「淺色」與「深色」主題

「緊湊」佈局可以在相同畫面下呈現更多影片

🔒 隱私與資安

並且為了確保隱私與資安，它是 100% 都在你的瀏覽器本地運行，我也完全不收集任何數據，大家可以放心使用。

等了一個禮拜，通過審查並上架成功~

結語

此擴充功能一開始是我自己想用，不過應該也有不少人有這個需求，所以我再花了一些時間 (還有花 150 元才能成為開發人員…) 上架到官方，歡迎大家多多使用。

如果有任何問題或建議，都可以留言或發 Email 反饋給我~

對生成式 AI 感興趣的讀者，記得追蹤 FB 粉專『 IT空間』，以免錯過最新的發文通知呦~🔔

「真正的死亡，是世界上再沒有一個人記得你。」
The real death is that no one in the world remembers you.

—— 《可可夜總會》

DevTools 純前端開發者工具箱

jia@jiatool.com (Jia) — Sat, 07 Mar 2026 20:15:00 +0800

前言

有時候在撰寫程式時，會需要一些小工具，例如 Base64 編碼&解碼、時間戳轉換、文字跳脫轉換…。
雖然網路上有許多類似的網站，但公司內部有資安問題，不便使用。而且為了這些小需求，每次都要寫個小程式也麻煩。

剛好最近我一直在使用 Google Antigravity 做一些小東西玩玩，想說這種簡單的需求，應該也可以透過 AI 完成。
於是就誕生出這個純前端小網站~ (有開源程式碼，需要的各位也可以 copy 回去)

[小廣告] 我製作了一款可愛的「企鵝魔法師」貼圖~
歡迎下載：LINE 貼圖、Telegram 貼圖 (免費)

網站介紹

馬上前往試玩~

DevTools — 開發者工具箱：https://devtools.jiatool.com/

網站截圖

網站截圖 1

網站截圖 2

網站截圖 3

網站截圖 4

工具清單

目前此網站有以下類別與工具，主要是加入我有機會用到的工具：

🔄 轉換

時間戳轉換 — Unix 時間戳與日期格式互轉
顏色轉換 — HEX、RGB、HSL 顏色格式相互轉換
大小寫轉換 — 變數命名風格轉換 (camelCase、snake_case 等)
JSON ↔ YAML — JSON 與 YAML 格式互轉
Cron 表達式 — Cron 排程表達式解析與下次執行時間計算
轉 Docker Compose — 將 docker run 指令轉為 docker-compose.yml

🔐 編碼 / 解碼

Base64 編碼/解碼 — Base64 編碼與解碼
URL 編碼/解碼 — URL 編碼與解碼
HTML 編碼/解碼 — HTML 特殊字元編碼與解碼
JWT 解碼 — 解析 JWT Token 的 Header 與 Payload
Unicode 編碼/解碼 — 文字與 Unicode (\uXXXX) 互轉
GUID/UUID 生成 — 批次生成隨機 GUID/UUID
密碼生成 — 產生高強度的隨機密碼
Hash & Checksum — 計算 MD5、SHA-256 等雜湊值

📝 格式化

JSON 格式化 — JSON 資料美化、驗證與壓縮
SQL 格式化 — 美化與壓縮 SQL 查詢語句
HTML 格式化 — HTML 程式碼美化與排版
JavaScript 格式化 — JavaScript 程式碼美化
CSS 格式化 — CSS 樣式表美化與壓縮
YAML 格式化 — YAML 語法檢查與格式化

🌐 網路連線

URL 解析 — 解析 URL 的各個組成部分 (Protocol、Host、Path、Params…)
HTTP 狀態碼 — HTTP Status Codes 查詢與說明
cURL 分析 — 解析 cURL 指令並顯示詳細資訊

✏️ 文字處理

正規表示式 — Regex 語法測試與驗證
文字跳脫 — 文字轉義 (Escape) 與還原 (Unescape)
文字計數 — 統計字元、字數、行數、句子與段落數
Markdown 預覽 — 即時 Markdown 語法預覽與渲染
假文生成 — 產生 Lorem Ipsum 假文，用於 UI 排版測試

🖼️ 圖片處理

圖片壓縮 — 圖片壓縮 (JPEG/PNG/WebP)
色輪配色 — 提供補色、相似色等多種調色盤方案
色票 — 常用色票 (Tailwind、Material、中國傳統色)
圖片 ↔ Base64 — 圖片與 Base64 編碼互轉
QR Code 生成 — 自訂顏色與容錯率的 QR Code 產生器

網站原始碼

如果想要自己布署，以下我也提供 GitHub 開源程式碼，想要自己修改、加新工具也可：
https://github.com/Jia35/DevTools

* 別忘了順手給顆 Star 星星~😆

結語

現在有了生成式 AI，想要自己開發什麼小工具真的越來越方便了~
例如這陣子就做了網站、Electron exe、瀏覽器擴充套件、手機 APP…等等相關應用工具 👍

對生成式 AI 感興趣的讀者，記得追蹤 FB 粉專『 IT空間』，以免錯過最新的發文通知呦~🔔

參考：
DevTools — 開發者工具箱

有時候，我們真的只需要 20 秒的瘋狂勇氣，哪怕就算會出糗，事情的結果也一定會有所改變的。

—— 《我們買了動物園》

自製「合成奇兵 (Merge Tactics) 棋盤工具」免費使用

jia@jiatool.com (Jia) — Sun, 20 Jul 2025 17:25:00 +0800

[2025/11/29] 新加入 " 切換遊戲版本 " 功能！
[2025/11/30] 新加入 "建築" 類別！

前言

我一直有在玩《部落衝突：皇室戰爭》手遊，最近遊戲內新出了「合成奇兵 (Merge Tactics)」模式。

上週看了 YouTube 上 Xiake 主播的影片，分享他自製了一個棋盤工具，我覺得很有趣，所以透過與 Gemini 協作，我也嘗試自己花時間製作了一個我自己的版本。

主要讓玩家可以先在這工具上嘗試擺放不同組合、陣型，查看每張角色(部隊)與羈絆資訊，查看不同遊戲版本的數據，遇到推薦的陣型還可以分享連結。

非常歡迎大家進來使用看看~👍

合成奇兵 (Merge Tactics) 棋盤工具

合成奇兵 (Merge Tactics) 棋盤工具：https://pages.jiatool.com/merge-tactics/arena

合成奇兵 (Merge Tactics) 棋盤工具

基本介紹

要將角色(部隊)擺放到棋盤上，可以透過點一下角色，再點一下棋盤的棋格，或者也可以按住滑鼠使用拖曳的方式。

點擊有角色的棋格，即可將其角色移除。
(左方清空按鈕，可一次清除棋盤上所有的角色)

滑鼠指到角色上，會出現關於此角色的介紹 (名稱、描述、聖水、羈絆…)。

角色(部隊) 介紹

當放置角色後，棋盤左方也會像遊戲內一樣顯示羈絆，滑鼠指到羈絆上方，出現關於此羈絆的介紹，與其對應棋盤上的角色。

羈絆介紹

切換遊戲版本

(位於網頁左上角) 此下拉選單可以讓你切換到不同遊戲版本的數據，切換之後，角色、羈絆都會改成對應版本的數值，看看哪個時候加了甚麼新角色、新羈絆，做了哪些調整。

還有按鈕可以另開網頁，查看官方更新的說明文章。

左上角「切換遊戲版本」功能

分享盤面

我還有加入「分享盤面」功能，當擺放好角色後，點擊右上角的「分享盤面」按鈕，即可獲得網址，其他人打開此網址，即可查看你分享的陣型~

右上角「分享盤面」按鈕

例如 "巨星+王牌+巨人" 陣型：
https://pages.jiatool.com/merge-tactics/arena?board=eyJ2IjoxLCJndiI6Imd2LWJlYyIsImIiOlt7Im1vbmsiOjIxfSx7ImVsZWN0cm8tZ2lhbnQiOjIyfSx7InJveWFsZ2lhbnQiOjI4fSx7Im11c2tldGVlciI6MzB9LHsiZXhlY3V0aW9uZXIiOjM0fSx7IndpdGNoIjozOH1dfQ

其他

目前我網頁主要是針對電腦版的螢幕尺寸，去做調整與優化，手機板雖然可以用，但體驗上比較不好。

另外，
各位使用上如果有遇到問題，或者有什麼建議，可以透過右上角的「問題回報」按鈕來回饋給我，我有時間&能力就會調整~

結語

這次是透過與 Gemini 協作所完成的成果，整體製作時間確實縮短了不少。

當然中間還是經過多次的調整與溝通，尤其是那個由六邊形棋格所組成的棋盤，一開始也一直沒有成功製作出來，我還有另外畫圖讓 LLM 理解。

Gemini 生成出來的網頁 UI，我是覺得還蠻不錯的~

歡迎追蹤『 IT空間』FB 粉專，不錯過最新的發文通知~🔔

因為我們淋過雨，所以懂得為別人撐傘。

[小工具] 自動計算定期票最佳購買日期

jia@jiatool.com (Jia) — Sun, 18 Oct 2020 21:00:00 +0800

前言

我上班/上學需要使用火車/捷運/公車定期票，應該要哪一天買能使用最多次？
雖然網路上有計算幾個工作天的工具，但沒有包含補班日、去除放假日啊， (而且我還有特休想請呢)
不然還要一天一天計算，好麻煩…

用途說明

此程式可以幫你計算一段時間內，甚麼時候開始使用定期票最划算。
例如：2020/07/15 ~ 2020/10/02 高捷推出 90 天無限卡(定期票)方案，我想知道從哪一天開時買，可以乘坐最多次(以上班上學為例)。

網頁連結

定期票最佳購買日期：https://tool.jiatool.com/find_workdays

操作說明

主要介面分為三部分：

介面說明

我以以下情境範例說明操作，
高雄捷運推行 90 天定期票方案，我是上班族想在 12/1~12/31 之內購買，但是不知道哪一天買可以使用最多天。
對了，我 12/21、12/22 請特休(放假)😎。

開始結束日期 (橘框)
選定開始日期(2020/12/01)、結束日期(2020/12/31)、天數(90)。

輸入日期
加入放假/補班日期 (綠框)
點擊 "加入放假/補班日期" 展開來加入特休(放假)日期，分別選擇 2020/12/21、2020/12/22 加入。
(如果有想取消的日期，點擊後方 x 符號即可移除)

加入特休(放假)日期
計算結果 (藍框)
點擊 "計算" 按鈕後，在下方即算出我最多可使用的天數是 59 天(上班日)，分別是 2020/12/27 開始 2021/3/26 結束和 2020/12/28 開始 2021/3/27 結束，這兩天買是最划算的，趕快加入日曆提醒~

計算結果

廢話(?

起因是因為 2020 年高雄捷運推行 90 天無限卡(定期票)方案，也就是 90 天內無限制搭乘，那我就想啦，應該要哪一天開始買最划算呢？
我只有上班日會使用到(還包含補班日)，但要去掉請假的日期，真希望有個程式可以幫我計算出來~

想了一下，嗯……感覺起來應該不難，產生了這個想法，開始用 Python 寫個很簡易的程式，
後來又想應該也有不少人有這個煩惱，不如我就用 JavaScript 改寫(雖然我很不熟…)、HTML 建個簡易介面，因此又開始查查資料、改改程式，咚~這個靜態網頁就跑出來了~😁

結語

如果剛好有這個需求，快進來解決你的煩惱；如果沒有需要，也歡迎進來玩玩看~

參考：
定期票最佳購買日期

人生就像騎腳踏車，想保持平衡就得往前走。
Life is like riding a bicycle. To keep your balance you must keep moving.

—— 愛因斯坦