Firefox扩展跨域访问document权限错误求助

你遇到的failed to execute script: Error: Permission denied to access property "document"错误，核心原因是扩展后台脚本（app.js）和网页属于完全隔离的执行上下文——后台脚本无法直接访问页面的DOM对象，哪怕是同域名页面也不行。你手动在控制台运行script.js是在网页自身的上下文里，所以能正常工作，但通过后台脚本调用就会触发浏览器的跨上下文权限限制。

以下是针对性的修复步骤，结合你的项目结构：

1. 修正manifest.json权限与配置 #

首先确保扩展拥有访问目标页面的权限，并且使用Manifest V3（主流标准，同时兼容Firefox和Chrome）：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "icons": {
    "48": "icons/icon-48.png",
    "96": "icons/icon-96.png"
  },
  "action": {
    "default_icon": "icons/icon-48.png"
  },
  // 允许临时访问当前活跃标签页，注入脚本
  "permissions": ["activeTab", "scripting"],
  // 测试阶段允许访问所有网址，上线后替换为你需要的指定域名（比如"http://localhost/*"）
  "host_permissions": ["<all_urls>"],
  "background": {
    "scripts": ["app.js"]
  }
}

2. 调整app.js：用浏览器API注入内容脚本 #

后台脚本不能直接调用script.js的逻辑，必须通过scripting.executeScript将脚本注入到网页上下文：

// 监听扩展按钮点击事件
browser.action.onClicked.addListener(async (activeTab) => {
  try {
    // 把script.js注入到当前活跃的标签页
    await browser.scripting.executeScript({
      target: { tabId: activeTab.id },
      files: ["scripts/script.js"]
    });
  } catch (err) {
    console.error("脚本注入失败:", err);
  }
});

3. 优化script.js：在网页上下文执行逻辑 #

如果你的需求是直接在页面内创建弹窗，保持script.js原有逻辑即可（因为注入后会在网页上下文运行，能正常访问document）：

// 提取特定内容（替换成你的实际提取逻辑）
const extractedContent = document.querySelector(".your-target-selector").innerText;

// 创建弹窗展示内容
const popup = window.open("", "ContentPopup", "width=400,height=300");
popup.document.write(`<h3>提取内容</h3><p>${extractedContent}</p>`);
popup.document.close();

如果需要把内容传给后台脚本再创建弹窗，修改script.js添加消息传递：

// 提取内容
function getTargetContent() {
  return document.querySelector(".your-target-selector").innerText;
}

// 发送内容给后台脚本
browser.runtime.sendMessage({
  type: "CONTENT_READY",
  content: getTargetContent()
});

然后在app.js中监听消息并创建弹窗：

browser.action.onClicked.addListener(async (activeTab) => {
  try {
    await browser.scripting.executeScript({
      target: { tabId: activeTab.id },
      files: ["scripts/script.js"]
    });
  } catch (err) {
    console.error("脚本注入失败:", err);
  }
});

// 监听来自内容脚本的消息
browser.runtime.onMessage.addListener((msg) => {
  if (msg.type === "CONTENT_READY") {
    // 创建弹窗展示内容
    browser.windows.create({
      type: "popup",
      width: 400,
      height: 300,
      url: `data:text/html,<html><body><h3>提取的内容</h3><p>${msg.content}</p></body></html>`
    });
  }
});

本地测试注意事项 #

• 如果你测试用的test-page.html是本地文件（file://协议）：
  • Firefox需要在about:config中设置extensions.webextensions.file_urls_access为true；
  • Chrome加载扩展时，要勾选扩展详情里的「允许访问文件网址」选项。

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