如何用瀏覽器內嵌腳本自動化網頁元素操作和數值計算？

瀏覽器內嵌腳本實現網頁自動化與數值計算

本文探討如何利用瀏覽器內嵌腳本自動化網頁元素操作和數值計算。 我們將解決一個實際案例：自動點擊網頁按鈕、提取數值、計算并輸入結果，以及循環執行直至特定條件滿足的問題。 用戶希望實現一個腳本，自動點擊“激勵”按鈕，獲取“當前效率”數值，代入公式 (100 – 當前效率) × 344 計算，并將結果輸入指定輸入框，最后點擊“確定”按鈕，并循環此過程，直到“當前效率”達到100。 用戶提供的Tampermonkey腳本存在問題，本文將分析并提供改進方案。

問題分析及解決方案

用戶腳本的主要問題在于選擇器不準確和點擊操作的時機控制不當：

1. 選擇器問題: querySelector 選擇器可能因頁面結構變化而失效。 建議使用瀏覽器的開發者工具(F12)檢查目標元素的結構，并使用更精確的選擇器，例如ID或更具體的類名。 避免使用依賴元素順序的選擇器（如:nth-child()）或絕對路徑，因為這些容易受頁面結構改變的影響。

2. 點擊操作順序和時機: 連續點擊“激勵”和“確定”按鈕可能導致頁面未及時更新，從而獲取錯誤的“當前效率”值。 需要在點擊“激勵”按鈕后添加延遲，等待頁面更新后再進行后續操作。 建議使用setTimeout 或 setInterval 函數控制執行時機。 正確的流程應為：點擊“激勵” -> 等待頁面更新 -> 獲取數值 -> 計算 -> 輸入結果 -> 點擊“確定”。

改進建議

為了提高腳本的可靠性和可維護性，建議：

• 使用更精確的選擇器: 通過開發者工具找到目標元素的唯一標識符（ID）或更具體的類名作為選擇器。
• 添加等待機制: 在點擊“激勵”按鈕后，使用 setTimeout 函數等待一段時間，確保頁面更新后再獲取“當前效率”值。 可以使用循環和條件判斷，直到獲取到正確的值。
• 錯誤處理: 使用 try…catch 塊捕獲潛在錯誤，例如元素未找到或數值解析失敗等。
• 日志記錄: 添加日志記錄功能，方便調試和排錯。 記錄關鍵步驟的執行情況和結果。
• 循環控制: 使用 while 循環，并設置終止條件（“當前效率”達到100）。
• 腳本啟動/停止機制: 考慮添加按鈕或其他機制來控制腳本的啟動和停止。

通過以上改進，可以創建一個更健壯、更可靠的自動化腳本，有效地完成網頁元素操作和數值計算。 記住，仔細檢查頁面結構和調整腳本邏輯是解決此類問題的關鍵。