網頁 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 秒的瘋狂勇氣，哪怕就算會出糗，事情的結果也一定會有所改變的。

—— 《我們買了動物園》

Chrome Snippets 執行 JavaScript 程式片段

jia@jiatool.com (Jia) — Sat, 03 Dec 2022 21:15:00 +0800

前言

如果我們在 Chrome 上想執行一段 JavaScript 程式碼時，會打開開發人員工具的 Console 頁面來執行。

開發人員工具的 Console 頁面

如果我們有段 Code 有時會重複使用到，例如想破解網頁不能按右鍵、加入快捷鍵、提取文字等等操作，難道每次都要再打一次？或者還要另外儲存再用複製貼上？那也太麻煩了吧😫
那你可以試試改用 Snippets (片段)功能，來運行 JavaScript。

* 之前動畫瘋還沒有彈幕的快捷鍵時，我就是透過這種方法來幫它加上快捷鍵 XD

開發人員工具的 Sources 頁面

其實這概念類似小書籤 (bookmarklet，又叫書籤小程式)。

除了 Chrome 以外，只要是基於 Chromium 開發的瀏覽器也有此項功能，像是 Microsoft Edge 和 Opera。

前往 Snippets 頁面

在瀏覽器中(以下以 Google 的 Chrome 來示範) 打開開發人員工具(F12)，並切換到 Sources > Snippets，這邊就是讓我們撰寫、儲存、執行 JS 片段的的地方。

Snippets 頁面

* 如果沒看到「Snippets」tag，可以點擊旁邊的 …(More tabs) 符號。

加入 Snippets 片段

這邊為了示範，我隨便舉個例子。
例如我想要複製巴哈姆特 GNN 新聞的標題，但一個一個框選、複製、貼上太麻煩，因此我需要透過 JS 幫我整理出來我只需要複製一次就好。

首先，透過 Elements 頁面找到標題文字的元素，得知其 CSS Selector 是 .BH-lbox > .GN-lbox2B > h1 > a，取得其文字的 JS 寫法如下:

1

document.querySelector(".BH-lbox > .GN-lbox2B > h1 > a").textContent;

* 對於 CSS Selector 規則有興趣的可以參考我之前整理的這篇：常用網頁 CSS Selector (選擇器)取得元素，搭配 Python BeautifulSoup 套件。

GNN 新聞標題的元素

先透過開發人員工具的 Console 確認一下：

擷取 GNN 新聞的標題

完成我們的程式，將全部標題抓出來，並輸出在 Console 的程式碼如下：

1
2
3
4
5
6


var newsTitleEles = document.querySelectorAll(".BH-lbox > .GN-lbox2B > h1 > a");
var newsTitles = [];
newsTitleEles.forEach( ele => {
newsTitles.push(ele.textContent);
});
console.log(newsTitles.join('\n'));

點擊 New snippet 來新增一個空白的片段，將程式碼貼進去，並按 Ctrl+S（Windows和Linux）或 Command+S（Mac）保存。

Snippets 新增片段

執行

寫好 JS 片段後該如何執行呢？

你應該有發現下方的三角形圖示，點擊圖示後即可執行 (Ctrl+Enter 快捷鍵也可以)。

執行 JS 片段

除了可以在 Snippets 頁面中執行，還可以透過 Command Menu 執行。

確認在瀏覽器的「開發人員工具(F12)」，按 Control+O（Windows和Linux）或 Command+O（Mac）開啟 Command Menu。
輸入 ! 後點選想要執行的 snippet 名稱。

透過 Command Menu 執行 JS 片段

* 如果沒出現剛剛儲存的片段，可以把開發人員工具關掉再重整網頁重開後試試。

結語

透過開發人員工具的 Snippets 功能，可以保存並在需要時執行。但有個缺點是每次都要手動去點選執行，它沒辦法設定打開指定網址時自動執行。

好在，有個很有名的擴充套件 Tampermonkey，它有這項功能，就像是 Snippets 的進階版一樣！👍
* 但聽說 Tampermonkey 這類自訂腳本擴充套件，會因為之後 Chromium 內建的 Manifest 更新版，而導致無法使用 QAQ，希望能有解決辦法或替代方案出來。

參考：
Run snippets of JavaScript | Google Developers 文件說明

永遠不要讓別人的冷漠，影響了你對這世界的熱情

Chrome Remote Debug，在電腦上為手機網頁除錯 (以 Android 為例)

jia@jiatool.com (Jia) — Sat, 12 Mar 2022 20:40:00 +0800

前言

在電腦上我們想要除錯(Debug)網頁，可以使用 Chrome 的開發人員工具。
但在手機上呢？手機端無法開啟開發人員工具，不過不同的設備可能有不同的情況，在電腦上無法完全呈現出來，電腦測明明就好好的，可是用手機開就會出錯，又看不到 console 視窗。

這時，你可以採用 Chrome 的遠程調試(Debug)裝置功能，只需要透過 USB 傳輸線，即可在電腦端 Debug 網頁、查看 Console 內容。

圖片來源：Unsplash

步驟

首先要將手機連接到電腦，確保 Chrome 的 DevTools 可以偵測到手機裝置，再來才能在電腦上調試(Debug)手機上的網頁。

連接手機到電腦

將 Android 手機透過 USB 傳輸線連接到電腦。
開啟手機「USB 偵錯」功能。
進入手機的「設定」>「開發人員選項 (Developer Options)」>「啟動 USB 偵錯 (Enable USB Debugging)」。
* 不同品牌手機，開發人員選項位置會有差異，像是我的是在「設定」>「系統」底下。
* 如果你手機尚未開啟"開發人員選項"，可以上網尋找教學文章，不同品牌手機會有一些些差異，例如設定 > 系統 > 關於手機 > 軟體資訊 > (多次點擊)版本號碼。

手機端啟動 USB 偵錯
手機和電腦都打開 Chrome (必須登入 Google 帳戶、不能使用無痕模式)。
電腦端在網址列輸入 chrome://inspect#devices。
會進入 DevTools 的 Devices 列表，確保「Discover USB devices」有勾選，並稍等它抓取裝置，將會出現手機的型號名稱。

Chrome DevTools 的 Devices 列表

* 如果它顯示 Pending authentication: please accept debugging session on the device.，則需到手機點選允許 USB 偵錯 (Allow USB Debugging)。

手機端允許 USB 偵錯

* 如果無法找到手機裝置，可以到手機內「開發人員選項」> 「撤銷 USB 偵錯授權」(Revoke USB Debugging Authorizations)，然後再重試一遍。
* 在某些裝置或遇到其他情況無法連接，可到文章底下的官方參考資料尋找解答。

在電腦上調試(Debug)手機上的網頁內容

確保手機是解鎖狀態(或螢幕維持常開)，不然電腦端不會讓你互動、Debug。
電腦 Chrome 應該會出現手機內 Chrome 的分頁。
(確認手機上的 Chrome 是開啟的。)

顯示手機內 Chrome 的分頁
選擇一個分頁，或輸入想 Debug 的網頁後按 Open，點擊「inspect」進入開發人員工具。

開啟手機 Chrome 分頁
你可以在「手機」或「電腦」上操作，兩邊會互相同步哦~
接下來就可以像一般我們操作一樣，去 Debug 手機端的網頁囉。🎉🎉🎉

Debug 手機端的網頁

結語

當遇到網頁在 PC 電腦端上開明明都是正常的，改在手機端開就出現莫名其妙的問題，就可以透過以上方式來方便我們除錯 Debug。

歡迎追蹤『 IT空間』FB 粉專，取得最新發文通知🔔

參考：
Remote debug Android devices | Chrome Developers
Chrome Remote Debug with Mobile | PJCHENder
手機遠程測試 | iT邦幫忙

大部分的人都會懷念以前「單純」的生活，有「攻略」可以照著玩的日子。
但是在開放世界中，我們才有機會走出「自己的路」。

WORDLE 猜字謎 - 加入幾個不同的功能

jia@jiatool.com (Jia) — Thu, 24 Feb 2022 21:30:00 +0800

前言

最近 WORDLE 小遊戲迅速爆紅，在歐美社群平台會看到許多人分享，後續還衍伸出不同種內容，甚至到《紐約時報》花費百萬美元收購這款拼字小遊戲。
單純的畫面、遊戲機制簡潔，以及可以分享過程到社群平台，或許是它爆紅的原因。

算是練習網頁前端，我也嘗試自己製作這款遊戲，並加入了像是"中文意思"、"繼續出題"、"選擇出題範圍"等等幾個功能，感興趣的快進來嘗試，看看你的功力如何~

🎮 WORDLE 猜字謎：https://wordle.jiatool.com/

WORDLE 猜字謎

規則說明

嘗試在 6 次機會中猜出謎底，謎底為 5 個字母的單字，而且每次猜測必須是有效的單字。

每次猜測後，圖塊的顏色會發生變化，顯示你猜測與答案的接近程度。

猜題過程，各顏色所代表的意思

🟩 綠色：表示字母位置正確。
🟨 黃色：表示答案包含該字母但位置錯誤。
⬜ 灰色：表示答案不包含該字母。

玩法有點類似猜數字 1A2B，只是 WORDLE 會明確指出哪些字母猜中了。

點擊畫面上 "ENTER" 鍵送出、"←" 鍵刪除字母。

功能設定

除了原版的基本功能外，我自己還加入幾個功能設定：

答完後可點擊繼續出題，一直遊玩🤩。
輸入單字送出後，右方會出現此單字的中文翻譯。
可選擇出題範圍題庫，例如：國中 1200 單字、高中 7000 單字。 (變更後需重新出題)
可變更顯示的英文字母大寫或小寫。
可設定是否出題要包含重複字母的單字，例如：enter 有兩個 "e" 就算是包含重複字母的單字。 (變更後需重新出題)

其中 "出題範圍題庫" 和 "是否包含重複字母"，設定完後需要點選重新出題，謎底的單字才會重新選擇。

* 目前對於行動裝置，支援度沒那麼完善，建議使用電腦或平板遊玩。
* 尚有許多單字的中文意思還未加入，之後會陸續補上。

🎮 WORDLE 猜字謎：https://wordle.jiatool.com/

結語

雖然只是個我自己練習的專案，不過也分享給各位遊玩，看看有沒有人能想出更棒的點子、玩法😎。

之前我也有做個「解謎闖關遊戲」靜態網頁，也可以過去看看： Web Secret Game

歡迎追蹤『 IT空間』FB 粉專，取得最新發文通知🔔

參考：
WORDLE 遊戲原版

Make your dreams come true.（讓美夢成真）

—— 迪士尼

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

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.

—— 愛因斯坦

自製網頁解謎闖關遊戲

jia@jiatool.com (Jia) — Sun, 09 Aug 2020 13:10:00 +0800

之前在巴哈小屋我有寫一篇「使用Python、Flask和Netlify創建簡單的靜態網站」文章，介紹使用 Flask(Jinja2模板引擎) 來在 Netlify 上創建簡單的靜態網站。

因此我後來有做個好玩(燒腦?)的解謎小遊戲。

🎮 遊戲網址：https://webgame.jiatool.com

Web Secret Game 首頁

玩法大致是要從網頁中尋找線索，找出下一關的網址~

第五關

第九關

趕快來挑戰看看，能不能全破(共18關)吧~

如有遇到其他問題，或真的很想要提示XD，歡迎底下留言~😎
(也可到我巴哈小屋此篇文章底下留言)

第一步，便是要確信一切皆有可能，然後達成的機率便會發生。

—— Elon Musk 伊隆·馬斯克 (著名企業家)

常用網頁 CSS Selector (選擇器)取得元素，搭配 Python BeautifulSoup 套件

jia@jiatool.com (Jia) — Fri, 12 Jun 2020 22:29:06 +0800

(2021/10/03 新增) 瀏覽器使用 CSS Selectors 搜尋教學。

最近開始接觸網路爬蟲，因此順便把一些常用網頁取得元素(element)的 CSS Selectors 方式整理一下，第一部分是純 CSS，第二部分則是 Python 搭配 BeautifulSoup 套件。

喜歡網路爬蟲也歡迎觀看 Python網路爬蟲實例系列文章~

純CSS

先上表格，後面還有範例。

說明	語法
tag 定位	span font
id 定位	#ID
class 定位	.CLASS
排除	:not()
屬性值	[name="NAME"]
屬性值(不等於)	[name!="NAME"]
屬性值包含	[title*="TITLE"]
屬性值開頭	[title^="start"]
屬性值結尾	[title$="end"]
第 1 個子元素 (全部)	ul li:first-child
最後 1 個子元素 (全部)	ul li:last-child
第 2 個子元素 (全部)	ul li:nth-child(2)
倒數第 2 個子元素 (全部)	ul li:nth-last-child(2)
第 1 個子元素 (指定)	ul li:first-of-type
最後 1 個子元素 (指定)	ul li:last-of-type
第 2 個子元素 (指定)	ul li:nth-of-type(2)
倒數第 2 個子元素 (指定)	ul li:nth-last-of-type(2)
第奇數個子元素 (指定)	ul li:nth-of-type(odd)
第偶數個子元素 (指定)	ul li:nth-of-type(even)
第 3 的倍數個子元素 (指定)	ul li:nth-of-type(3n)
第 3 的倍數+1個子元素 (指定)	ul li:nth-of-type(3n+1)
同一層往後尋找元素	#ID ~ i
同一層的"下一個"元素	#ID + *
同時尋找多種選擇器	#id1 , #id2

1
2
3
4


import re
from bs4 import BeautifulSoup
soup = BeautifulSoup(html, 'html.parser')

標籤定位(tag、id、class)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<html>
<span>
<div><font>001</font></div>
<font>002</font>
</span>
<div id="ID">003</div>
<div class="CLASS CLASS2">004</div>
<i name="NAME" style="STYLE">005</i>
<i name="NAME2" style="STYLE">006</i>
<div title="TITLE">007</div>
<div title="start-TITLE">008</div>
<div title="TITLE-end">009</div>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


# tag定位：
soup.select_one('span font')
# <font>001</font>
soup.select_one('span > font')
# <font>002</font>
# id定位：
soup.select_one('#ID')
soup.select_one('div#ID')
# <div id="ID">003</div>
# class定位：
soup.select_one('.CLASS')
soup.select_one('div.CLASS')
soup.select_one('div.CLASS.CLASS2')
# <div class="CLASS CLASS2">004</div>
# 同時尋找多種選擇器
soup.select('#ID , .CLASS')
# [<div id="ID">003</div>, <div class="CLASS CLASS2">004</div>]
# 排除
soup.select('div:not(#ID):not(.CLASS)')
# [<div><font>001</font></div>, <div title="TITLE">007</div>, <div title="start-TITLE">008</div>, <div title="TITLE-end">009</div>]

元素屬性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


# 元素有某屬性：
soup.select_one('i[name]')
# <i name="NAME" style="STYLE">005</i>
# 屬性值：
soup.select_one('i[name="NAME"]')
soup.select_one('i[name="NAME"][style="STYLE"]')
# <i name="NAME" style="STYLE">005</i>
# 屬性值不等於：
soup.select_one('i[name!="NAME"]')
# <i name="NAME2" style="STYLE">006</i>
# 屬性值包含某字串：
soup.select_one('div[title*="TITLE"]')
# <div title="TITLE">007</div>
# 屬性值以某字串開頭：
soup.select_one('div[title^="start"]')
# <div title="start-TITLE">008</div>
# 屬性值以某字串結尾：
soup.select_one('div[title$="end"]')
# <div title="TITLE-end">009</div>

子元素

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<html>
<div id="list">
<p>101</p>
<p>102</p>
<span>201</span>
<span>202</span>
<span>203</span>
<p>103</p>
<span>204</span>
<p>104</p>
</div>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


# -child
# 第1個、最後1個 子元素：
soup.select_one('ul#list li:first-child')
soup.select_one('ul#list li:last-child')
# <li>1001</li>
# <li>1004</li>
# 第2個、倒數第2個 子元素：
soup.select_one('ul#list li:nth-child(2)')
soup.select_one('ul#list li:nth-last-child(2)')
# <p>102</p>
# None
# 注意：倒數第2個元素不是"p"，因此找不到
# -of-type
# 第1個、最後1個 子元素：
soup.select_one('#list p:first-of-type')
soup.select_one('#list p:last-of-type')
# <p>101</p>
# <p>104</p>
# 第2個、倒數第2個 子元素：
soup.select_one('#list p:nth-of-type(2)')
soup.select_one('#list p:nth-last-of-type(2)')
# <p>102</p>
# <p>103</p>
# 以上兩種很像，他們的差別是：
# nth-child 會把全部的元素加進去算；nth-of-type 只會針對你指定的元素去算。
# 偶數、奇數 位置元素
soup.select('#list p:nth-of-type(odd)')
soup.select('#list p:nth-of-type(even)')
# [<p>101</p>, <p>103</p>]
# [<p>102</p>, <p>104</p>]

同一層元素

1
2
3
4
5
6


<html>
<div id="ID">301</div>
<div class="CLASS CLASS2">302</div>
<i name="NAME" style="STYLE">303</i>
<i name="NAME2" style="STYLE">304</i>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


# 在同一層往後尋找元素
soup.select_one('#ID ~ i')
# <i name="NAME" style="STYLE">303</i>
# 在同一層的"下一個"元素
soup.select_one('#ID + *')
# <div class="CLASS CLASS2">302</div>
# 在同一層，往後尋找"下一個"元素
soup.select_one('#ID + div')
# <div class="CLASS CLASS2">302</div>
# 在同一層，往後尋找中間跳過一個元素的"下一個"元素
soup.select_one('#ID + * + i')
# <i name="NAME" style="STYLE">303</i>

搭配 BeautifulSoup 套件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<div>
<span>標題</span>
<span>副標題</span>
<span>第二副標題</span>
<div class="a" title="first" href="/link">這是一行句子</div>
<a href="/link1">這是超連結1</div>
<a href="/link2">這是超連結2</div>
<div data-target="value">data屬性</div>
<div class="CLASS CLASS2">多個class</div>
</div>

尋找標籤

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


# 返回符合的單個元素(如有多個符合，則回傳第一個)，當找不到則回傳None：
soup.select_one('span')
soup.find('span')
# <span>標題</span>
# 返回符合的全部元素(List)，當找不到則回傳空List：
soup.select('span')
soup.find_all('span')
# [<span>標題</span>, <span>副標題</span>, <span>第二副標題</span>]
# 限制尋找元素數量：
soup.select("span", limit=2)
# [<span>標題</span>, <span>副標題</span>]

取得元素文字、值

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


# 取得元素的文字：
soup.select_one('div.a').text
# 這是一行句子
# 如果需要更多擷取方式，可使用get_text()
# 取得元素屬性的值：
soup.select_one('div.a').get('title')
# first
soup.select_one('div.a').get('class')
# ['a']
soup.select_one('div.a').get('href')
# /link

元素屬性、文字

有些較複雜的也可以改用 find 或 find_all 來尋找。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


# 基本的
soup.find_all(title="first")
# [<div class="a" href="/link" title="first">這是一行句子</div>]
# 因為 class 在 Python 中是保留字，所以尋找class時改使用 class_：
soup.find_all(class_="CLASS")
# [<div class="CLASS CLASS2">多個class</div>]
# 當想比對全部class(注意順序)
soup.find_all(class_="CLASS CLASS2")
# [<div class="CLASS CLASS2">多個class</div>]
# 某些HTML的屬性直接寫的話，會發生錯誤(例如 data-* 這類的屬性)，
# 改使用另一種方式即可：
soup.find_all(attrs={"data-target": "value"})
# [<div data-target="value">data屬性</div>]
# 以正規表示式比對超連結網址：
soup.find_all(href=re.compile("^/link\d"))
# [<a href="/link1">這是超連結1</a>, <a href="/link2">這是超連結2</a>]
# 以文字內容尋找(也可搭配正規表示式)
soup.find_all("div", string="這是一行句子")
soup.find_all("div", string=re.compile("句子"))
# [<div class="a" href="/link" title="first">這是一行句子</div>]

父元素、同一層元素

前面說的是以其元素往下尋找子元素，那如果要找父元素或同一層元素，使用以下方式：

1
2
3
4
5
6
7
8
9


<div id="div2">
<div id="div1">
<p id="a">第一點</p>
<p id="b">第二點</p>
<p id="my">第三點</p>
<p id="c">第四點</p>
<p id="d">第五點</p>
</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


# 先以 <p id="my">第三點</p> 元素為基準
my_tag = soup.find(id="my")
# 函式名稱多加s，代表尋找多個
# 向上尋找父元素
my_tag.find_parent("div")
my_tag.find_parents("div")
# 在同一層往前尋找元素
my_tag.find_previous_sibling("p")
# <p id="b">第二點</p>
my_tag.find_previous_siblings("p")
# [<p id="b">第二點</p>, <p id="a">第一點</p>]
# 在同一層往後尋找元素
my_tag.find_next_sibling("p")
# <p id="c">第四點</p>
my_tag.find_next_siblings("p")
# [<p id="c">第四點</p>, <p id="d">第五點</p>]

其他

其他在擷取網頁可能還需要的功能：

1
2
3
4
5
6


# 去除某個元素
node = soup.select_one("#my").extract()
# 去除多個元素
# 注意：前面已經將 #my 移除了
node = [t.extract() for t in soup.select("p")]

瀏覽器使用 CSS Selectors 搜尋

你知道在撰寫網路爬蟲程式時，可以有什麼方式快速找到元素的標籤嗎？
瀏覽器的 開發人員工具 有許多方便的功能讓我們使用~

Q. 如何開啟瀏覽器的 開發人員工具 呢？

A. 有以下三種方式：

網頁空白處點擊滑鼠右鍵 > 檢查。
瀏覽器(Chrome)右上選單 > 更多工具 > 開發人員工具。
快捷鍵 F12。

第一種開啟方式

第二種開啟方式

Q. 那如何快速找到元素的標籤？

A. 切換到 Elements 分頁，點擊左上角箭頭，並滑鼠指到(或點選)網頁上的元素。
如此開發人員工具內會跳到此元素的位置，並標註出來。

找到元素的標籤

Q. 如何使用 CSS Selectors 或 XPath 搜尋元素？

A. 在 Elements 分頁，快捷鍵 Ctrl + F，會跳出下方搜尋欄，可以透過 "文字"、"CSS Selectors"、"XPath" 搜尋元素。

Elements 下方搜尋欄

使用 CSS Selectors 或 XPath 搜尋元素

Q. 有辦法自動產生元素的 "CSS Selectors"、"XPath" 嗎？

A. 是可以，但不那麼建議，因為網頁有時會更新、變動，建議自己找出較好的 Selector 寫法。
對元素點擊滑鼠右鍵 > Copy > Copy selector。

複製元素的 CSS Selector 或 XPath

如有發現任何錯誤，歡迎底下留言告知~

參考：
Python selenium —— XPath and CSS cheat sheet
Python 使用 Beautiful Soup 抓取與解析網頁資料，開發網路爬蟲教學

不用很厲害才開始，要先開始才會很厲害。