怎样用 Firefox 地址栏关键字配合 JavaScript 自动生成出行方案？

Firefox 的地址栏不仅可以输入网址和搜索词，还能通过书签关键字触发任意 URL 模板。借助这一特性，我们可以把出行规划压缩成一条命令：在地址栏输入 go 人民广场，浏览器自动打开一个本地页面，页面里的 JavaScript 读取目的地、生成地图导航链接并展示天气建议。

一、Firefox 关键字搜索的工作机制

Firefox 书签属性中有一个关键字字段。给书签设置关键字 go 后，在地址栏输入 go 加空格再加内容，浏览器就会用输入内容替换书签 URL 中的 %s 并访问该地址。这个机制通常被用来添加自定义搜索引擎，例如把某个站内搜索 URL 设为书签，但它的本质是 URL 模板，目标不一定是搜索引擎，也可以是本地脚本页面或任意 Web 应用。

例如，创建一个书签，URL 设置为 http://127.0.0.1:8080/plan.html?dest=%s，关键字设置为 go。之后输入 go 机场，Firefox 会访问 http://127.0.0.1:8080/plan.html?dest=机场。空格和中文会被自动编码，页面脚本只需要从查询参数中读取 dest 即可。这里选择 127.0.0.1 是因为本地服务不经过外部网络，响应速度更快，也便于调试。

与浏览器扩展相比，书签关键字方案不需要申请额外权限，也不会常驻后台。只要一个静态 HTML 页面和一个本地 HTTP 服务就能运行。缺点是用户需要先启动本地服务，页面功能也受浏览器同源策略限制，后面会具体说明如何处理外部数据请求。

二、JavaScript 解析参数并生成路线

当 Firefox 把地址栏输入转换为 URL 后，页面里的 JavaScript 可以通过 URLSearchParams 读取 dest 参数。拿到目的地名称后，我们不必自己计算路线，直接使用地图平台提供的 URI 规划接口即可。高德、百度、腾讯地图都支持通过固定 URL 打开导航或路线规划，只需把目的地名称、坐标和出行方式拼接到 query 中。

下面是一段基础解析逻辑，负责读取参数、设置默认目的地，并根据出行方式生成对应的地图路线链接。为了简单，示例使用文字描述替代真实坐标查询，实际使用时可以先用地理编码接口把地名转换为经纬度。

// 读取 Firefox 关键字传入的目的地参数
const params = new URLSearchParams(window.location.search);
const dest = params.get('dest') || '人民广场';
const mode = params.get('mode') || 'car';

// 拼接高德地图路线规划 URI，实际坐标需通过地理编码接口获取
function buildRouteUrl(place, travelMode) {
  const base = 'https://uri.amap.com/navigation';
  const query = new URLSearchParams();
  query.set('to', place);
  query.set('mode', travelMode);
  query.set('policy', '0');
  return base + '?' + query.toString();
}

const routeUrl = buildRouteUrl(dest, mode);
console.log('生成的出行路线地址：', routeUrl);
document.getElementById('route-link').textContent = routeUrl;

这段代码没有直接跳转，而是先把生成的地址显示在页面中，方便用户确认。如果希望输入 go 目的地 后立即打开地图，可以在脚本末尾追加 window.location.href = routeUrl;，这样整个过程几乎没有等待。实际开发中可以把出行方式作为第二个参数，例如输入 go 公司 transit 就调用公交规划，输入 go 公司 car 则调用驾车规划。

需要特别注意的是，拼接 URL 时中文字符应当通过 URLSearchParams 处理，而不是手动用加号或百分号编码。URLSearchParams 会自动处理空格、中文和特殊符号，避免因编码不一致导致地图端无法识别目的地。

三、构建一个可运行的本地规划页

把解析逻辑放进一个完整的 HTML 页面，就能配合 Firefox 书签关键字直接使用。下面代码包含一个简单的输入区、结果展示区和脚本逻辑。页面本身不需要构建工具，保存为 plan.html 即可。为了支持中文和移动端，设置了 viewport 和基础样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智能出行规划</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 680px; margin: 40px auto; padding: 0 16px; }
    input, select, button { font-size: 16px; padding: 8px; margin: 4px 0; }
    .result { margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; }
  </style>
</head>
<body>
  <h1>出行规划</h1>
  <p>目的地：<span id="dest-text"></span></p>
  <div>
    <label>出行方式：</label>
    <select id="mode-select">
      <option value="car">驾车</option>
      <option value="bus">公交</option>
      <option value="walk">步行</option>
    </select>
    <button id="go-btn">生成路线</button>
  </div>
  <div class="result" id="result-box">路线地址将显示在这里</div>

  <script>
    const params = new URLSearchParams(window.location.search);
    const dest = params.get('dest') || '人民广场';
    const mode = params.get('mode') || 'car';

    document.getElementById('dest-text').textContent = dest;
    document.getElementById('mode-select').value = mode;

    function buildRouteUrl(place, travelMode) {
      const base = 'https://uri.amap.com/navigation';
      const query = new URLSearchParams();
      query.set('to', place);
      query.set('mode', travelMode);
      query.set('policy', '0');
      return base + '?' + query.toString();
    }

    function showRoute() {
      const currentMode = document.getElementById('mode-select').value;
      const url = buildRouteUrl(dest, currentMode);
      document.getElementById('result-box').textContent = url;
    }

    document.getElementById('go-btn').addEventListener('click', showRoute);
    showRoute();
  </script>
</body>
</html>

保存后，在页面所在目录启动本地 HTTP 服务。如果电脑上装有 Python，可以执行 python -m http.server 8080；如果使用 Node.js，也可以用 npx http-server -p 8080。启动服务后访问 http://127.0.0.1:8080/plan.html 确认页面正常显示。

接着在 Firefox 中收藏该地址，并编辑书签属性，把关键字设置为 go，URL 改成 http://127.0.0.1:8080/plan.html?dest=%s。保存后，在地址栏输入 go 火车站，Firefox 就会打开规划页并把火车站作为目的地。这样地址栏就变成了一个轻量的出行命令入口。

四、加入天气与实时公交信息

只有路线还不够，出行前通常还要看天气和公交到站时间。由于页面运行在本地 HTTP 服务上，JavaScript 可以使用 fetch 请求外部接口。如果使用公共天气 API，需要先在服务商处申请密钥，并注意接口必须支持 HTTPS 和 CORS。很多天气服务允许前端直接调用，但会限制域名或请求次数。

以下是一个异步获取天气信息的示例。为了避免暴露真实密钥，这里使用一个示意地址，实际开发时替换为自己的接口。请求成功后，把温度和天气状况插入页面。对于公交到站信息，可以请求所在城市的开放数据接口，根据线路和站点编号获取剩余到站分钟数。

async function loadWeather(city) {
  const apiUrl = 'https://ipipp.com/weather?city=' + encodeURIComponent(city);
  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error('天气接口响应异常');
    }
    const data = await response.json();
    const temp = data.temp ?? '--';
    const text = data.weather ?? '未知';
    document.getElementById('weather-box').textContent = city + '：' + text + ' ' + temp + '℃';
  } catch (error) {
    document.getElementById('weather-box').textContent = '天气信息暂不可用';
    console.error(error);
  }
}

// 在页面加载后调用，city 可以根据目的地推断或由用户配置
loadWeather('上海');

这段代码演示了异步请求的基本结构。真实项目中建议增加请求超时和缓存，避免每次打开地址栏都消耗 API 配额。对于公交实时数据，通常需要先获取站点 ID，再轮询到站时间，可以设置 30 秒刷新一次。如果外部接口不允许浏览器跨域，可以在本地服务端增加一个代理路由，把请求转发到目标接口，浏览器只与本地服务通信。

把天气和公交信息与路线地址放在同一个页面展示，用户只需要看一眼就能决定什么时候出门、选择哪种交通方式。相比在多个 App 之间切换，这种聚合方式更贴近实际出行习惯。

五、安全、隐私与兼容性说明

地址栏关键字中的目的地会出现在 Firefox 历史记录和地址栏建议中。如果经常查询家庭住址、医院等敏感地点，建议开启 Firefox 的隐私浏览模式，或定期清理地址栏历史。另一个方法是只使用地标或公司名，避免输入精确门牌号。

由于页面是本地服务，其他设备默认无法访问，但如果你把服务绑定到 0.0.0.0 或暴露到局域网，就要注意页面不要输出任何敏感数据。外部地图和天气请求应始终使用 HTTPS，防止路径和位置信息在传输过程中被窃听。Firefox 对本地页面的混合内容限制较少，但为了安全，建议所有接口都使用加密连接。

兼容性方面，Firefox 桌面版和移动版均支持书签关键字，不过移动版地址栏输入关键字的交互略有差异。JavaScript 部分依赖 URLSearchParams、fetch 和模板字符串，这些特性在现代 Firefox 中都能稳定运行。如果需要在较旧环境中使用，可以把 URLSearchParams 替换为手动解析 location.search，并把 async/await 改为 Promise 链式调用。

Firefox关键字搜索JavaScript出行规划修改时间：2026-10-04 03:08:32