如何通过JS/浏览器API切换Firefox的Kiosk Mode（F11）

首先得明确一点：普通网页中的JavaScript是没法直接触发Firefox的F11全屏模式的。这是浏览器的安全策略限制——如果允许任意网页控制浏览器窗口状态，恶意网站很容易滥用这个权限强制用户进入全屏，带来安全风险。

不过，你可以通过Firefox的WebExtensions（浏览器扩展）来实现这个需求，因为扩展拥有更高的权限来操作浏览器窗口。下面是具体的实现步骤：

1. 开发一个简单的浏览器扩展 #

我们需要创建一个扩展，利用Firefox的windows API来切换窗口的全屏状态（也就是F11对应的模式）。

第一步：创建扩展文件 #

新建一个文件夹，里面包含以下几个文件：

manifest.json（扩展配置文件）

这个文件用来声明扩展的权限、基础信息和入口：

{
  "manifest_version": 2,
  "name": "Kiosk Mode Toggle",
  "version": "1.0",
  "permissions": ["windows"],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_title": "切换Kiosk模式"
  }
}

background.js（后台脚本）

这个脚本负责监听操作，执行窗口状态切换：

// 监听扩展工具栏按钮的点击事件
browser.browserAction.onClicked.addListener(async () => {
  // 获取当前活跃的浏览器窗口
  const currentWindow = await browser.windows.getCurrent();
  // 判断当前窗口是否处于全屏状态
  const isFullscreen = currentWindow.state === "fullscreen";
  
  // 切换窗口状态：全屏 ↔ 正常
  await browser.windows.update(currentWindow.id, {
    state: isFullscreen ? "normal" : "fullscreen"
  });
});

2. 测试扩展 #

1. 打开Firefox，输入about:debugging并回车；
2. 点击左侧的「This Firefox」；
3. 点击「Load Temporary Add-on」，选择你刚才创建的manifest.json文件；
4. 现在浏览器工具栏会出现一个扩展图标，点击它就能切换F11模式了——这就是你要的那种悬停任务栏能看到标签页的全屏模式。

3. 让网页触发切换（可选） #

如果你想让自己的网页触发这个切换操作，可以通过网页与扩展通信的方式实现：

修改扩展配置 #

在manifest.json中添加externally_connectable字段，允许你的网页和扩展通信：

"externally_connectable": {
  "matches": ["https://your-domain.com/*"] // 替换成你的网页域名
}

更新后台脚本 #

修改background.js，监听来自网页的消息：

// 监听工具栏点击
browser.browserAction.onClicked.addListener(toggleKioskMode);

// 监听来自网页的消息
browser.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.action === "toggleKiosk") {
    await toggleKioskMode();
    sendResponse({success: true});
  }
});

// 封装切换逻辑
async function toggleKioskMode() {
  const currentWindow = await browser.windows.getCurrent();
  const isFullscreen = currentWindow.state === "fullscreen";
  await browser.windows.update(currentWindow.id, {
    state: isFullscreen ? "normal" : "fullscreen"
  });
}

网页中添加触发按钮 #

在你的网页里添加一个按钮，并编写JS代码发送消息给扩展：

<button id="toggleKioskBtn">切换Kiosk模式</button>

<script>
document.getElementById('toggleKioskBtn').addEventListener('click', async () => {
  try {
    // 向扩展发送切换请求
    await browser.runtime.sendMessage({action: "toggleKiosk"});
    console.log("Kiosk模式已切换");
  } catch (error) {
    console.error("无法切换Kiosk模式：", error);
  }
});
</script>

注意事项 #

• 这种方式切换的是浏览器级别的全屏模式（F11对应的状态），和HTML5的requestFullscreen()触发的网页内容全屏完全不同；
• 临时扩展仅在调试模式下有效，如果要正式使用，需要将扩展打包成XPI文件，或者提交到Firefox Add-ons商店；
• 一定要确保你的网页域名和manifest.json中externally_connectable的配置匹配，否则网页无法和扩展通信。

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