如何开发Chrome扩展实现geolocation地理位置的自定义覆盖？

实现核心逻辑 #

要覆盖浏览器默认的定位结果，本质是通过扩展向页面注入自定义JS，提前覆写navigator.geolocation下的原生方法，把页面调用定位接口的返回值替换为你自定义的坐标参数即可。

具体开发步骤 #

1. 编写扩展manifest配置文件 #

目前推荐使用Chrome官方主推的Manifest V3版本开发，配置示例如下：

{
  "manifest_version": 3,
  "name": "自定义定位覆盖工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["inject.js"],
      "world": "MAIN",
      "run_at": "document_start"
    }
  ],
  "permissions": ["storage"]
}

配置说明：

• world: "MAIN" 表示注入脚本运行在页面的主上下文，才能访问并修改页面的navigator对象，默认的隔离上下文无法修改页面全局属性
• run_at: "document_start" 保证注入脚本在页面自身JS执行前就完成覆写，避免页面提前调用原生定位接口
• permissions 里加storage是为了后续可以存储用户自定义的坐标参数，不需要的话可以去掉

2. 编写注入逻辑脚本inject.js #

该脚本需要实现对三个核心定位方法的覆写，示例代码如下：

// 自定义定位坐标，这里示例是北京的坐标，可根据需求修改，也可以从chrome.storage读取用户配置
const CUSTOM_LOCATION = {
  coords: {
    latitude: 39.9042,
    longitude: 116.4074,
    accuracy: 10,
    altitude: null,
    altitudeAccuracy: null,
    heading: null,
    speed: null
  },
  timestamp: Date.now()
};

// 覆写单次定位方法
navigator.geolocation.getCurrentPosition = (success, error, options) => {
  // 加短延迟模拟真实定位请求的耗时
  setTimeout(() => success(CUSTOM_LOCATION), 80);
};

// 覆写持续定位监听方法
navigator.geolocation.watchPosition = (success, error, options) => {
  const watchId = Math.floor(Math.random() * 10000);
  setTimeout(() => success(CUSTOM_LOCATION), 80);
  // 如果需要定时更新坐标可以在这里加定时器逻辑
  return watchId;
};

// 覆写定位监听清除方法
navigator.geolocation.clearWatch = (watchId) => {
  // 如果你在watchPosition里加了定时器，这里对应清除即可
  return;
};

3. 可选扩展功能开发 #

如果需要灵活修改定位坐标，你可以额外开发扩展的弹窗页面，做一个简单的表单让用户输入经纬度，保存到chrome.storage.local中，同时在inject.js里监听存储变化，动态更新自定义坐标的数值，不用每次修改代码重新加载扩展。

注意事项 #

• 针对Google Maps API的场景，大部分情况下覆写原生geolocation方法就可以生效，部分特殊封装的SDK如果存在独立定位逻辑，可以针对性对SDK的调用入口做额外覆写适配
• 如果遇到部分站点不生效的情况，首先检查manifest的matches规则是否覆盖了对应站点，再确认是否有页面脚本在你的注入脚本执行前就调用了原生定位接口
• 如果你使用Manifest V2开发，配置逻辑基本一致，只是不需要在content_scripts里加world: "MAIN"配置即可，但目前Chrome已经逐步停止对V2扩展的支持，优先推荐V3版本

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