如何使用JavaScript编写的浏览器扩展点击新打开页面的按钮

你当前代码失效的核心原因是：window.open打开的是独立的新标签页，你在原扩展弹窗/页面上下文执行的DOM查询操作，只能访问当前上下文的DOM结构，完全无法触及新打开的第三方页面的元素，所以点击逻辑不会生效。

浏览器扩展要操作第三方页面的DOM，必须使用**内容脚本（Content Script）**能力，按以下步骤修正即可：

1. 调整manifest.json权限配置（Manifest V3版本） #

首先在扩展的manifest.json中声明需要的权限：

{
  "manifest_version": 3,
  "name": "自动加购工具",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "host_permissions": ["https://www.mediamarkt.de/*"],
  "action": {
    "default_popup": "popup.html"
  }
}

2. 修正弹窗逻辑代码 #

将原逻辑调整为新开标签页后，动态向新标签页注入点击脚本：

window.onload = function () {
    const checkBox = document.getElementById("onofftoggle");
    const runBtn = document.getElementById('run');
    const text = document.getElementById("替换为你自己的text元素ID"); // 原代码未声明text变量，需补全
    
    // 事件绑定移到判断外，避免重复绑定
    runBtn.addEventListener('click', async () => {
        if (!checkBox.checked) return;
        // 新开目标页面标签
        const [newTab] = await chrome.tabs.create({
            url: 'https://www.mediamarkt.de/de/product/_trust-gxt-323-carus-2724281.html'
        });
        // 等待页面加载
        await new Promise(resolve => setTimeout(resolve, 5000));
        // 向新标签页注入执行加购点击逻辑
        await chrome.scripting.executeScript({
            target: {tabId: newTab.id},
            func: async () => {
                // 可选：替换固定延时为元素监听，兼容动态渲染场景
                const waitForElement = (selector) => new Promise(resolve => {
                    if (document.querySelector(selector)) return resolve(document.querySelector(selector));
                    const observer = new MutationObserver(mutations => {
                        if (document.querySelector(selector)) {
                            observer.disconnect();
                            resolve(document.querySelector(selector));
                        }
                    });
                    observer.observe(document.body, {childList: true, subtree: true});
                });
                const addCartBtn = await waitForElement("#pdp-add-to-cart-button");
                addCartBtn.click();
            }
        });
    }, false)

    // 开关逻辑单独抽离
    checkBox.onclick = function () {
        text.style.display = checkBox.checked ? "block" : "none";
    }
}

• 原代码中text变量未提前声明，需替换为你实际页面中对应元素的获取逻辑，否则会触发变量未定义报错
• 若目标页面按钮为动态渲染，使用代码中的waitForElement监听逻辑比固定延时可靠性更高
• 调试时可在扩展管理页面开启开发者模式，点击扩展的「检查视图」查看弹窗的控制台报错信息

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