如何通过Firefox插件强制屏幕共享并隐藏选择弹窗

核心思路 #

Firefox的WebExtensions提供了desktopCapture API，允许扩展直接指定要捕获的屏幕/窗口，无需用户手动选择。你需要开发一个简单扩展，配合页面JavaScript调用，实现强制共享屏幕1的功能。

步骤1：创建扩展文件结构 #

新建一个名为force-screen-share的文件夹，包含以下文件：

• manifest.json：扩展配置文件
• background.js：后台脚本，处理屏幕捕获请求
• content-script.js：注入目标页面的脚本，负责页面与后台的通信

步骤2：编写manifest.json #

声明必要权限，指定后台脚本和内容脚本的匹配规则（替换成你的目标页面域名）：

{
  "manifest_version": 2,
  "name": "Force Screen Share",
  "version": "1.0",
  "permissions": ["desktopCapture", "<all_urls>"],
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["*://your-target-domain.com/*"],
      "js": ["content-script.js"]
    }
  ]
}

步骤3：编写background.js #

后台脚本监听内容脚本的请求，调用API捕获屏幕1：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "startScreenShare") {
    // 仅请求屏幕类型的捕获源
    chrome.desktopCapture.chooseDesktopMedia(
      ["screen"],
      sender.tab,
      (streamId) => {
        if (streamId) {
          sendResponse({ streamId: streamId });
        } else {
          sendResponse({ error: "Failed to get screen stream" });
        }
      }
    );
    return true; // 保持端口开放以异步响应
  }
});

步骤4：编写content-script.js #

作为页面与后台的中间层，转发请求并返回结果：

window.addEventListener("message", (event) => {
  if (event.source !== window || event.data.action !== "requestScreenShare") return;

  chrome.runtime.sendMessage({ action: "startScreenShare" }, (response) => {
    if (response.streamId) {
      window.postMessage({
        action: "screenShareResponse",
        streamId: response.streamId
      }, "*");
    } else {
      window.postMessage({
        action: "screenShareResponse",
        error: response.error
      }, "*");
    }
  });
});

步骤5：修改页面的JavaScript代码 #

不再直接调用getDisplayMedia，通过与内容脚本通信获取流ID并创建媒体流：

async function startForcedScreenShare() {
  return new Promise((resolve, reject) => {
    window.postMessage({ action: "requestScreenShare" }, "*");

    const listener = (event) => {
      if (event.data.action !== "screenShareResponse") return;
      window.removeEventListener("message", listener);

      if (event.data.streamId) {
        navigator.mediaDevices.getUserMedia({
          video: {
            mandatory: {
              chromeMediaSource: "desktop",
              chromeMediaSourceId: event.data.streamId,
              maxWidth: screen.width,
              maxHeight: screen.height
            }
          }
        }).then(resolve).catch(reject);
      } else {
        reject(new Error(event.data.error));
      }
    };
    window.addEventListener("message", listener);
  });
}

// 调用示例
startForcedScreenShare()
  .then(stream => {
    const video = document.getElementById("screen-video");
    video.srcObject = stream;
  })
  .catch(err => console.error("Screen share error:", err));

步骤6：安装并测试扩展 #

1. 打开Firefox，输入about:debugging进入调试页面
2. 点击「此 Firefox」→「加载临时附加组件」
3. 选择扩展文件夹中的manifest.json文件
4. 打开目标页面，调用startForcedScreenShare即可自动共享屏幕1，无选择弹窗

额外说明 #

• 若需指定非默认屏幕，可添加system.display权限到manifest，通过chrome.system.display.getInfo()获取屏幕列表，筛选对应ID传入chooseDesktopMedia
• 因你完全控制设备，无需担心权限安全问题

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