如何从Tab对象获取文档DOM对象？Firefox扩展开发疑问

你的代码无法生效的核心原因是：window.document操作的是扩展自身运行环境（比如背景脚本、弹出页的window）的DOM，而非新创建的空白标签页的DOM，自然改不到目标页面。

要实现需求，需要通过Firefox扩展的tabs.executeScriptAPI，向新标签页注入脚本，在目标页面的上下文里修改DOM。

解决方案代码 #

browser.tabs.create({url: 'about:blank'}).then(tab => {
  // 向新标签页注入脚本，直接操作其DOM
  browser.tabs.executeScript(tab.id, {
    code: `document.body.innerHTML = '<h1>Lol</h1>';`
  }).catch(err => {
    console.error('注入脚本失败:', err);
  });
});

必要的权限配置 #

需要在扩展的manifest.json中配置对应权限，确保能访问about:blank并执行脚本：

Manifest V2 配置 #

{
  "manifest_version": 2,
  "name": "自定义空白页扩展",
  "version": "1.0",
  "permissions": [
    "tabs",
    "about:blank"
  ]
}

Manifest V3 配置 #

{
  "manifest_version": 3,
  "name": "自定义空白页扩展",
  "version": "1.0",
  "permissions": ["tabs"],
  "host_permissions": ["about:blank"]
}

额外说明 #

• 注入的脚本运行在目标标签页的上下文环境中，因此脚本内的document就是空白标签页的DOM对象。
• 如果修改逻辑复杂，可以将代码写入单独的文件（比如content-script.js），然后通过file参数注入：

  browser.tabs.executeScript(tab.id, {
    file: 'content-script.js'
  });
  

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