如何实现Chrome扩展在按钮出现时自动点击（支持后台触发）

我有一个网站，2分钟无操作会自动登出，登出前弹出警告窗口，有「dismiss」按钮可阻止登出。需要开发Chrome/Edge扩展，在按钮出现时自动点击，即使标签页非活动或浏览器在后台。

目前已实现弹窗手动点击按钮，但自动触发的两种方案均失败，附上两种方案代码：

现有方案代码 #

第一种方案 #

manifest.json

{"manifest_version": 2,"name": "TEST","version": "4.0","permissions": ["activeTab"],"browser_action": {"default_icon": "icon.png","default_popup": "popup.html"}}

popup.html

<!DOCTYPE html>
<html>
<head>
    <title>My Extension</title>
</head>
<body>
    <h1>Hello, Extension!</h1>
    <button id="dismissButton">Dismiss</button>

    <script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById('dismissButton').addEventListener('click', function() {
    chrome.tabs.executeScript({
        code: `document.querySelector('.btn.abc-btn.abc-btn-blue').click();`
    });
})
function isDismissButtonVisible() {
    const dismissButton = document.querySelector('.btn.abc-btn.abc-btn-blue');
    return dismissButton && window.getComputedStyle(dismissButton).display !== 'none';
}

function clickDismissButton() {
    const dismissButton = document.querySelector('.btn.abc-btn.abc-btn-blue');
    if (dismissButton) {
        dismissButton.click();
    }
}

const intervalId = setInterval(() => {
    if (isDismissButtonVisible()) {
        clickDismissButton();
        clearInterval(intervalId);
    }
}, 10000);

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (tab.title === 'abc Reliance') {
        clickDismissButton();
    }
});

第二种方案 #

manifest.json

{"manifest_version": 2,"name": "Button Watcher Extension","version": "1.2","permissions": ["activeTab", "tabs"],"content_scripts": [{"matches": ["*abc.com/*"],"js": ["content.js"]}],"background": {"scripts": ["background.js"],"persistent": false},"browser_action": {"default_icon": "icon.png","default_popup": "popup.html"}}

popup.html

<!DOCTYPE html>
<html>
<head>
    <title>Button Watcher Extension</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #countdown {
            font-size: 24px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h3>Click Button</h3>
    <h4 id="present">presentyn</h4>
    <button id="dismissButton">Dismiss</button>
    <p id="countdown">secondsLeft</p>

    <script src="popup.js"></script>
</body>
</html>

content.js（版本1）

document.getElementById('dismissButton').addEventListener('click', function() {
    chrome.tabs.executeScript({
         code: `document.querySelector('.btn.abc-btn.abc-btn-blue').click();`
    });
});


function isDismissButtonVisible() {
    let presentyn = 'no'; 
    const dismissButton = document.querySelector("#gbqfbb"); 
    
    
    if (dismissButton && window.getComputedStyle(dismissButton).display !== 'none') {
        presentyn = 'yes';
    }
    displaypresent(presentyn);
    return presentyn; 
}

function clickDismissButton() {
    const dismissButton = document.querySelector('.btn.abc-btn.abc-btn-blue');
    if (dismissButton) {
        dismissButton.click();
    }
}

function waitOneSecond() {
     setTimeout(function() {
        displayCountdown(secondsLeft);       
    }, 1000); 
}


function startCountdown() {
    let secondsLeft = 3;

    
    displayCountdown(secondsLeft);
    

    
    const countdownInterval = setInterval(() => {
        secondsLeft--;
        displayCountdown(secondsLeft);

        if (secondsLeft === 0) {
            secondsLeft = 0;
            displayCountdown(secondsLeft);
            waitOneSecond();
            clearInterval(countdownInterval); 
            isDismissButtonVisible();
            if (presentyn='yes') {
                clickDismissButton();   
            }
            startCountdown();
        }
    }, 200);
}


function displayCountdown(seconds) {
    const countdownElement = document.getElementById('countdown');
    countdownElement.innerText = seconds;
}

function displaypresent(valuep) {
    const presentElement = document.getElementById('present');
    presentElement.innerText = valuep;
}

startCountdown();

content.js（版本2）

const buttonSelector = '.btn.abc-btn.abc-btn-blue';


function clickButton() {
    const button = document.querySelector(buttonSelector);
    if (button) {
        button.click();
    }
}


function displayCountdown(seconds) {
    const countdownElement = document.getElementById('countdown');
    countdownElement.innerText = seconds;
}


function startCountdown() {
    let secondsLeft = 3;
    displayCountdown(secondsLeft);

    const countdownInterval = setInterval(() => {
        secondsLeft--;
        displayCountdown(secondsLeft);

        if (secondsLeft === 0) {
            clearInterval(countdownInterval);
            clickButton(); 
        }
    }, 1000); 
}


document.addEventListener('DOMContentLoaded', () => {
    startCountdown();
});

const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (!mutation.addedNodes) return;

        for (const node of mutation.addedNodes) {
             if (node.matches("[class*='ui-dialog-content']")) {
                
                const buttonToClick = document.querySelector(buttonSelector);
                if (buttonToClick) {
                    buttonToClick.click();
                }
            }
        }
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false
});

background.js

chrome.browserAction.onClicked.addListener((tab) => {
    chrome.tabs.sendMessage(tab.id, { action: "clickButton" }, (response) => {
        if (response.success) {
            console.log("Button clicked successfully!");
        } else {
            console.log("Button not found.");
        }
    });
});

# Listen for tab changes
chrome.tabs.onActivated.addListener((activeInfo) => {
    const tabId = activeInfo.tabId;
    chrome.tabs.get(tabId, (tab) => {
        if (tab.url.includes("*://abc.com/*")):
            # Inject content script
            chrome.tabs.executeScript(tabId, { file: "content.js" }, () => {
                # Content script loaded
                console.log("Content script injected");
            });
    });
});

# Listen for messages from content.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.buttonClicked):
        console.log("Button clicked!");
        # Do something after button click

现有方案核心问题 #

1. 第一种方案：自动逻辑全部写在popup.js中，而popup仅在打开时运行，关闭后代码立即停止，无法持续监控页面状态。
2. 第二种方案：
   • content.js错误操作popup的DOM元素（如document.getElementById('countdown')），content.js运行在网页上下文，无权访问popup的DOM。
   • background.js混用Python注释语法（#），且重复注入content script，逻辑混乱。
   • 定时器与Mutation Observer逻辑冗余，未考虑非活跃标签的定时器节流问题。

正确解决方案 #

核心思路：使用content script持续监控网页，配合Mutation Observer精准监听弹窗出现，同时通过双保险机制确保非活跃标签下也能正常触发。

1. manifest.json（v2，兼容Chrome/Edge） #

{
  "manifest_version": 2,
  "name": "Auto Dismiss Logout Warning",
  "version": "1.0",
  "permissions": ["tabs"],
  "content_scripts": [
    {
      "matches": ["*://*.abc.com/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

2. content.js（核心逻辑） #

const BUTTON_SELECTOR = '.btn.abc-btn.abc-btn-blue';
const DIALOG_SELECTOR = "[class*='ui-dialog-content']"; // 匹配警告弹窗容器

// 点击按钮的核心函数
function clickDismissButton() {
  const button = document.querySelector(BUTTON_SELECTOR);
  if (button && window.getComputedStyle(button).display !== 'none') {
    button.click();
    console.log('自动点击了Dismiss按钮');
  }
}

// 用Mutation Observer监听弹窗出现
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        // 检查新增节点是否是弹窗容器或包含弹窗容器
        if (node.matches(DIALOG_SELECTOR) || node.querySelector(DIALOG_SELECTOR)) {
          setTimeout(clickDismissButton, 100); // 延迟100ms确保按钮渲染完成
        }
      }
    });
  });
});

// 启动监听
observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: false,
  characterData: false
});

// 定时器兜底（防止Mutation Observer漏监）
setInterval(() => {
  clickDismissButton();
}, 5000); // 每5秒检查一次

3. popup.html（仅保留手动触发按钮） #

<!DOCTYPE html>
<html>
<head>
  <title>Auto Dismiss</title>
  <style>
    body { width: 120px; padding: 10px; font-family: Arial, sans-serif; }
    button { width: 100%; padding: 8px; cursor: pointer; }
  </style>
</head>
<body>
  <h4>Auto Dismiss Enabled</h4>
  <button id="manualDismiss">手动点击Dismiss</button>
  <script src="popup.js"></script>
</body>
</html>

4. popup.js（手动触发逻辑） #

document.getElementById('manualDismiss').addEventListener('click', () => {
  chrome.tabs.executeScript({
    code: `document.querySelector('.btn.abc-btn.abc-btn-blue')?.click();`
  });
  window.close();
});

关键说明 #

• content script独立运行：content script运行在网页上下文，即使标签页非活跃或浏览器在后台，只要网页未被冻结，就能持续执行（Mutation Observer不受非活跃标签节流影响）。
• 双保险机制：Mutation Observer精准监听弹窗出现，定时器兜底防止监听遗漏。
• 跨上下文隔离：content script仅操作网页DOM，popup通过executeScript向网页注入代码，避免跨上下文错误。

内容的提问来源于stack exchange，提问作者protter