Chrome Extension如何让work flow在页面刷新、跳转继续执行任务

从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 = 0
    return new  Promise((resolve) => {
        const findEl = () => {
            current = current + 1
            console.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()