无需vps服务器如何在 Blogger 中免费集成“美国和加拿大真实地址生成器”
最近发现了一个很有意思的开源项目：
Real US Address Generator 。它可以生成包含真实街道、邮编、电话号码和对应地图定位的美国/加拿大身份信息。 很多做跨境电商、海淘或需要注册海外服务的朋友，经常需要寻找
美国真实地址生成器 。市面上的工具大多广告满天飞，或者需要复杂的服务器部署。 这个开源项目 原本基于 Cloudflare Workers，经过修改后，现在可以直接嵌入到
Blogger 、Hexo 或 Hugo 等静态博客中，完全免费且无广告。 通常这类工具需要服务器支持，原项目也是设计部署在 Cloudflare Workers 上的。但我平时主要使用
Blogger ，能不能把它“移植”进我的博客页面里，直接用纯前端运行呢？ 经过一番折腾和代码重构，我成功实现了！今天就把这个过程和可以直接使用的代码分享给大家。 项目原理解析 原项目地址： chatgptuk/real-us-address-generator 原项目的逻辑主要在 worker.js 中。它的工作原理是：
坐标数据 ：内置了美国各州和加拿大各省的经纬度范围。
API 查询 ：通过 OpenStreetMap 的 Nominatim API，根据坐标反向查询真实的街道地址。
数据生成 ：随机生成匹配的电话区号、姓名和性别。 遇到的问题： 原代码是为服务端（Server-side）设计的，使用了 addEventListener(‘fetch’) 等浏览器无法识别的指令，且依赖服务端请求来避免跨域问题。如果直接把代码复制到 Blogger，是无法运行的。 解决方案： 我将服务端代码完全重写为浏览器可运行的 JavaScript。 移除了 Cloudflare 特有的监听器。 将 API 请求改为浏览器原生的 fetch 。 将所有坐标数据和电话区号数据直接内嵌到 HTML 中，无需加载外部文件。 增加了兜底逻辑：如果 API 请求频繁受限，会自动降级显示大致坐标地址，保证页面不报错。 部署步骤 只需要简单三步，你就能拥有一个属于自己的地址生成器页面。 第一步：新建页面 登录 Blogger 后台，点击左侧菜单的
“页面” (Pages) ->
“新建页面” (New Page) 。给页面起个标题，比如“真实地址生成器”。 第二步：切换 HTML 视图 在编辑器左上角找到铅笔图标，点击下拉菜单选择
“HTML 视图” (HTML view) …
