從Electron到Chrome Extension：流程自動化的跨平臺探索

在之前的項目中，我使用Electron成功實現了一個流程自動化應用，它極大地提高了工作效率。然而，當面對Chrome擴展程序（Extension）的需求時，我意識到需要一種新的策略來應對瀏覽器環境下的限制。特別是Chrome Extension v3在background.js中不支持直接操作DOM，以及頁面刷新可能中斷正在執行的任務這兩個問題，成為了我們需要解決的關鍵點。

挑戰與限制

**background.js的限制：**在Chrome Extension v3中，background腳本無法直接操作DOM，這與Electron環境下的自由操作形成了鮮明對比。
**頁面刷新的影響：**當瀏覽器頁面刷新時，原先在執行的流程任務可能會被中斷，這對于需要持續監控或執行的任務來說是一個嚴重的問題。

解決方案一：內容腳本（Content Script）的利用

對于第一個問題，解決方案相對簡單。我們可以將流程任務的執行邏輯轉移到content script中，因為content script可以直接與頁面DOM進行交互。這樣，我們就能夠繞過background.js無法操作DOM的限制。。如下一個基本flow執行事件的封裝。

function getDom(selector, timeout = 1000, frequency = 60) {let current = 0return new  Promise((resolve) => {const findEl = () => {current = current + 1console.log('current --- selector', selector, current)// const elDom = document.querySelector(selector)const elDom = document.evaluate(selector, document).iterateNext()if (elDom) {resolve(elDom)return}if (current > frequency) { console.log(`重復${frequency}次,沒有找到`)resolve('')return}setTimeout(() => {findEl()