如何在Chrome浏览器中获取当前连接的WiFi网络SSID？

前提说明 #

普通网页没有权限访问系统网络信息，必须通过Chrome扩展实现——Chrome专门提供了系统网络API供扩展调用，这也是官方系统设置、诊断页面能显示WiFi名称的原因。

实现步骤 #

1. 准备扩展文件 #

创建一个新文件夹，包含以下两个核心文件：

manifest.json（扩展配置文件）

{
  "manifest_version": 3,
  "name": "WiFi名称查看工具",
  "version": "1.0",
  "permissions": ["system.network"],
  "action": {
    "default_popup": "popup.html"
  }
}

• manifest_version: 3 是Chrome扩展的最新标准
• permissions: ["system.network"] 声明访问系统网络信息的必要权限
• action 指定扩展图标点击后弹出的页面

popup.html（显示WiFi名称的页面）

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 220px; padding: 12px; }
    #wifiDisplay { font-size: 16px; margin-top: 8px; color: #2d3748; }
  </style>
</head>
<body>
  <p>当前连接的WiFi：</p>
  <div id="wifiDisplay"></div>

  <script>
    // 调用Chrome系统网络API获取接口信息
    chrome.system.network.getNetworkInterfaces((interfaces) => {
      const wifiElement = document.getElementById('wifiDisplay');
      // 筛选WiFi类型的网络接口
      const wifiInterface = interfaces.find(iface => iface.type === 'wifi');

      if (wifiInterface) {
        // 部分Chromebook的WiFi接口名称格式为「wlan0-SSID」，拆分提取真实名称
        const ssid = wifiInterface.name.split('-').slice(1).join('-');
        wifiElement.textContent = ssid || "未知名称";
      } else {
        wifiElement.textContent = "未连接WiFi或无法获取信息";
      }
    });
  </script>
</body>
</html>

• 通过chrome.system.network.getNetworkInterfaces获取所有系统网络接口
• 筛选出type为wifi的接口，拆分其name字段得到WiFi名称（适配Chromebook的接口命名规则）

2. 加载扩展到Chrome #

1. 打开Chrome，输入chrome://extensions/进入扩展管理页
2. 开启右上角的「开发者模式」
3. 点击「加载已解压的扩展程序」，选择你创建的文件夹
4. 扩展图标会出现在Chrome工具栏，点击即可看到当前WiFi名称

注意事项 #

• 该API仅支持Chrome扩展环境，普通网页无法直接调用
• 若WiFi名称提取错误，可以在脚本中添加console.log(interfaces)，查看接口的具体字段格式后调整拆分逻辑

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