vercel-labs/slack

Slack 自動化

與 Slack 工作區互動，以檢查訊息、提取資料並自動化常見任務。

快速入門

連接到現有的 Slack 瀏覽器工作階段，或開啟 Slack：

# 連接到現有的工作階段（port 9222，通常用於已開啟的 Slack）
agent-browser connect 9222

# 如果 Slack 尚未執行，則開啟它
agent-browser open https://app.slack.com

然後拍攝快照以查看可用的內容：

agent-browser snapshot -i

核心工作流程

1. 連接/導航：開啟或連接到 Slack
2. 快照：取得具有參考（例如 @e1、@e2）的互動元素
3. 導航：點擊分頁、展開區段或導航到特定頻道
4. 提取/互動：讀取資料或執行動作
5. 截圖：擷取發現的證據

# 範例：檢查未讀頻道
agent-browser connect 9222
agent-browser snapshot -i
# 尋找「更多未讀」按鈕
agent-browser click @e21  # 「更多未讀」按鈕的參考
agent-browser screenshot slack-unreads.png

常見任務

檢查未讀訊息

# 連接到 Slack
agent-browser connect 9222

# 拍攝快照以定位未讀按鈕
agent-browser snapshot -i

# 尋找：
# - 「更多未讀」按鈕（通常在側邊欄頂部附近）
# - 「活動」分頁中的「未讀」切換按鈕（顯示未讀計數）
# - 帶有徽章或粗體文字的頻道名稱，表示有未讀

# 導航到「活動」分頁，以一次查看所有未讀
agent-browser click @e14  # 活動分頁（參考可能不同）
agent-browser wait 1000
agent-browser screenshot activity-unreads.png

# 或檢查私訊分頁
agent-browser click @e13  # 私訊分頁
agent-browser screenshot dms.png

# 或在側邊欄中展開「更多未讀」
agent-browser click @e21  # 更多未讀按鈕
agent-browser wait 500
agent-browser screenshot expanded-unreads.png

導航到頻道

# 在側邊欄中或依名稱搜尋頻道
agent-browser snapshot -i

# 在清單中尋找頻道名稱（例如「engineering」、「product-design」）
# 點擊頻道 treeitem 的參考
agent-browser click @e94  # 範例：engineering 頻道參考
# 將 `engineering` 替換為點擊的頻道名稱，以便舊的頻道
# 標頭無法滿足等待條件，而新頻道仍在渲染中。
agent-browser wait --fn "document.querySelector('[data-qa="channel_header"]')?.innerText.includes('engineering')"
agent-browser screenshot channel.png

尋找訊息/討論串

# 使用 Slack 搜尋
agent-browser snapshot -i
agent-browser click @e5  # 搜尋按鈕（典型參考）
agent-browser fill @e_search "keyword"
agent-browser press Enter
# 比對提交的查詢，以避免重複搜尋重用舊路線。
agent-browser wait --fn "location.pathname.includes('/search') && new URL(location.href).searchParams.get('q') === 'keyword'"
agent-browser screenshot search-results.png

提取頻道資訊

# 取得所有可見頻道的清單
agent-browser snapshot --json > slack-snapshot.json

# 解析頻道名稱和元資料
# 尋找具有 level=2 的 treeitem 元素（區段下的子頻道）

查看頻道詳細資訊

# 開啟一個頻道
agent-browser click @e_channel_ref
agent-browser wait 1000

# 取得頻道資訊（成員、描述等）
agent-browser snapshot -i
agent-browser screenshot channel-details.png

# 捲動瀏覽訊息
agent-browser scroll down 500
agent-browser screenshot channel-messages.png

記錄筆記/捕捉狀態

當您需要記錄從 Slack 取得的發現時：

# 拍攝帶有註解的快照（顯示元素編號）
agent-browser screenshot --annotate slack-state.png

# 拍攝全頁截圖
agent-browser screenshot --full slack-full.png

# 取得目前 URL 以供參考
agent-browser get url

# 取得頁面標題
agent-browser get title

側邊欄結構

了解 Slack 的側邊欄有助於有效導航：

- 討論串
- 對話
- 草稿與已傳送
- 目錄
- [區段標題 - 外部連線、星號、頻道等]
  - [頻道以 treeitem 形式列出]
- 直接訊息
  - [私訊列出]
- 應用程式
  - [應用程式捷徑]
- [更多未讀] 按鈕（切換未讀頻道清單）

要尋找的關鍵參考：

• @e12 - 首頁（通常）
• @e13 - 私訊分頁
• @e14 - 活動分頁
• @e5 - 搜尋按鈕
• @e21 - 更多未讀按鈕（依工作階段而異）

Slack 中的分頁

點擊頻道後，您會看到分頁：

• 訊息 - 頻道對話
• 檔案 - 共用檔案
• 釘選 - 已釘選的訊息
• 新增畫布 - 協作畫布
• 根據工作區設定的其他分頁

點擊分頁參考以切換檢視並取得不同資訊。

從 Slack 提取資料

取得文字內容

# 取得訊息或元素的文字
agent-browser get text @e_message_ref

解析無障礙樹

# 將完整快照作為 JSON 以程式化方式解析
agent-browser snapshot --json > output.json

# 尋找：
# - 頻道名稱（treeitem 中的 name 欄位）
# - 訊息內容（在 listitem/document 元素中）
# - 使用者名稱（包含使用者資訊的 button 元素）
# - 時間戳記（包含時間資訊的 link 元素）

計算未讀數量

# 展開未讀區段後：
agent-browser snapshot -i | grep -c "treeitem"
# 未讀區段中每個包含頻道名稱的 treeitem 代表一個未讀

最佳實踐

• 連接到現有工作階段：如果 Slack 已開啟，請使用 agent-browser connect 9222。這比開啟新瀏覽器更快。
• 在點擊前先拍攝快照：在點擊按鈕之前，務必先執行 snapshot -i 來識別參考。
• 導航後重新拍攝快照：導航到新頻道或區段後，拍攝新的快照以尋找新的參考。
• 使用 JSON 快照進行解析：當您需要提取結構化資料時，使用 snapshot --json 以獲得機器可讀的輸出。
• 控制互動節奏：在快速互動之間加入 sleep 1，讓 UI 有時間更新。
• 檢查無障礙樹：無障礙樹顯示了螢幕閱讀器（和您的自動化工具）可以看到的內容。如果某個元素不在快照中，它可能被隱藏或需要捲動才能看到。
• 在側邊欄中捲動：如果頻道清單很長，請使用 agent-browser scroll down 300 --selector ".p-sidebar" 在 Slack 側邊欄中捲動。

限制

• 無法存取 Slack API：這使用了瀏覽器自動化，而非 Slack API。不需要 OAuth、webhook 或機器人權杖。
• 工作階段限定：截圖和快照僅綁定於當前瀏覽器工作階段。
• 速率限制：Slack 可能會對過快的互動進行速率限制。必要時請在指令之間加入延遲。
• 工作區限定：您只能與自己的工作區互動，無法跨工作區自動化。

除錯

檢查主控台是否有錯誤

agent-browser console
agent-browser errors

取得當前頁面狀態

agent-browser get url
agent-browser get title
agent-browser screenshot page-state.png

範例：完整的未讀檢查

#!/bin/bash

# 連接到 Slack
agent-browser connect 9222

# 拍攝初始快照
echo "=== 檢查 Slack 未讀 ==="
agent-browser snapshot -i > snapshot.txt

# 檢查「活動」分頁的未讀
agent-browser click @e14  # 活動分頁
agent-browser wait 1000
agent-browser screenshot activity.png
ACTIVITY_RESULT=$(agent-browser get text @e_main_area)
echo "活動：$ACTIVITY_RESULT"

# 檢查私訊
agent-browser click @e13  # 私訊分頁
agent-browser wait 1000
agent-browser screenshot dms.png

# 檢查側邊欄中的未讀頻道
agent-browser click @e21  # 更多未讀按鈕
agent-browser wait 500
agent-browser snapshot -i > unreads-expanded.txt
agent-browser screenshot unreads.png

# 摘要
echo "=== 摘要 ==="
echo "請參閱 activity.png、dms.png 和 unreads.png 以取得完整詳細資訊"

參考資料

• Slack 文件：https://slack.com/help
• 網頁體驗：https://app.slack.com
• 鍵盤快速鍵：在 Slack 中輸入 ? 以查看快速鍵清單