Chrome扩展中如何用JS获取其他标签页的document并点击指定元素

问题根源 #

Chrome 扩展的 Background 运行在独立的沙箱环境中，chrome.tabs.query 返回的 Tab 对象仅包含标签页的元信息（比如id、url、标题等），不存在document属性，无法直接访问目标页面的DOM结构。

由于你打开的是扩展自有options.html页面，优先推荐以下两种解决方案： #

方案1：在options.html自有逻辑中实现自动点击（最推荐） #

直接在options.html引入的JS文件（比如options.js）中添加逻辑，页面加载完成后自动触发目标元素点击，无需修改Background复杂逻辑：

document.addEventListener('DOMContentLoaded', () => {
  const targetEl = document.getElementById('element_of_interest')
  targetEl && targetEl.click()
})

如果需要条件触发点击，可以在Background打开页面时携带URL参数：

1. 修改background.js中窗口创建逻辑：

chrome.windows.create({
  // 新增参数标记需要自动点击
  url: './options.html?action=autoClickTarget', 
  type: "popup", 
  focused: true
})

2. 调整options.js逻辑，读参数判断是否触发点击：

document.addEventListener('DOMContentLoaded', () => {
  const urlParams = new URLSearchParams(window.location.search)
  if (urlParams.get('action') === 'autoClickTarget') {
    const targetEl = document.getElementById('element_of_interest')
    targetEl && targetEl.click()
  }
})

方案2：通过chrome.scripting.executeScript注入代码执行点击 #

如果确实需要从Background侧主动触发操作，可以用脚本注入API实现，首先需要在manifest.json中声明对应权限：

"permissions": ["scripting"],
"web_accessible_resources": [{
  "resources": ["options.html"],
  "matches": ["<all_urls>"]
}]

修改后的background.js代码如下：

chrome.runtime.onMessage.addListener((request) => {
  if (request.s === 'quick') {
    chrome.windows.create({
      url: './options.html', 
      type: "popup", 
      focused: true
    }, (newWindow) => {
      // 直接获取新创建窗口的标签页，避免异步查询出错
      const targetTabId = newWindow.tabs[0].id
      // 监听页面加载完成事件后再执行操作
      chrome.tabs.onUpdated.addListener(function listener(tabId, info) {
        if (tabId === targetTabId && info.status === 'complete') {
          // 移除监听避免重复触发
          chrome.tabs.onUpdated.removeListener(listener)
          // 注入代码执行点击
          chrome.scripting.executeScript({
            target: { tabId: targetTabId },
            func: () => {
              const el = document.getElementById('element_of_interest')
              el && el.click()
            }
          })
        }
      })
    })
  }
})

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