如何通过JavaScript操作新打开的第二个浏览器标签页

你当前的代码存在两个核心问题：

• 第一，setTimeout使用方式错误，该API第一个参数需要传入要延迟执行的回调函数，第二个参数才是延迟毫秒数，你当前的写法不会触发任何延迟执行逻辑
• 第二，document默认指向当前执行代码的原始标签页DOM，和你新打开的标签页上下文完全隔离，所以永远只能操作原始页面的元素

修复方案（Chrome扩展标准实现） #

你开发Chrome扩展建议直接使用官方提供的chrome.tabs和chrome.scriptingAPI，可规避跨域限制，实现步骤如下：

1. 首先在扩展的manifest.json中添加对应权限（以Manifest V3版本为例）：

{
  "permissions": ["tabs", "scripting", "https://somesite/*"]
}

2. 替换原有逻辑代码，实现新标签页打开后自动点击目标按钮：

// 创建新标签页打开目标站点
chrome.tabs.create({ url: "https://somesite" }, (newTab) => {
  // 监听标签页加载状态
  chrome.tabs.onUpdated.addListener(function tabLoadListener(tabId, changeInfo) {
    // 校验为目标标签页且页面加载完成
    if (tabId === newTab.id && changeInfo.status === "complete") {
      // 移除监听避免重复触发
      chrome.tabs.onUpdated.removeListener(tabLoadListener);
      // 向新标签页注入执行代码
      chrome.scripting.executeScript({
        target: { tabId: newTab.id },
        func: () => {
          // 该方法会在新标签页上下文执行
          document.querySelector(".submitButton").click();
        }
      })
    }
  })
})

注意：如果你使用的是Manifest V2版本，需要将chrome.scripting.executeScript替换为chrome.tabs.executeScript，对应权限配置也需要同步调整

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