GeoLibre Chrome扩展开发解析从扫描网页到组装地图URL【免费下载链接】GeoLibreA lightweight, cloud-native GIS platform for visualizing, exploring, and analyzing geospatial data. It runs in the web browser, on the desktop, on mobile, and inside Jupyter notebooks.项目地址: https://gitcode.com/GitHub_Trending/ge/GeoLibreGeoLibre 是一款轻量级云原生 GIS 平台而它配套的 Chrome 扩展 Open data in GeoLibre 做了一件很实用的事自动扫描当前网页中的地理空间数据集链接和地图服务请求勾选后一键在 GeoLibre 中打开成地图。本文带你从源码层面看懂这个扩展是如何读懂一个网页、再拼装出可分享地图 URL 的。 极简架构一个扩展只需 6 个文件这个扩展基于 Manifest V3 构建核心文件都在 extensions/geolibre-chrome/ 目录下文件职责manifest.json声明权限与入口权限只有activeTab和scriptingscanner.mjs扫描页面中的数据集链接service-scanner.mjs识别 WMS/WMTS/WFS 等地图服务请求url-builder.mjs组装 GeoLibre 深度链接 URLpopup.mjs弹窗交互与流程编排值得注意的设计是它没有后台 service worker不存储任何数据——一切操作都在你点击工具栏图标的那一刻发生。这种零常驻权限的设计是后文隐私优势的根基。 第一步扫描网页里的数据集链接当你点击图标popup.mjs 会先获取当前标签页再通过chrome.scripting.executeScript把 scanner.mjs 中的scanDocumentForDatasets函数注入页面执行。这里有个 Chrome 扩展开发的小细节函数会被序列化后注入所以所有辅助函数必须定义在这个大函数内部不能引用模块级变量。扫描时它按线索强度给链接分类打分覆盖四个来源a href与link href同时读取type、rel、download、title和链接文字作为提示词data-url/data-href/source src等属性schema.org JSON-LD结构化数据中的contentUrl和downloadUrl字段Source Cooperative 仓库页的特殊处理读取页面内嵌的文件清单找回虚拟滚动列表中不可见的文件。分类规则很直观.geojson结尾识别为 GeoJSON、.pmtiles识别为 PMTiles、.tif/.cog识别为 GeoTIFF栅格并给每种格式赋予置信度分数0~3最终按分数从高到低排序输出。对于 Hugging Face 这类站点它还会把blob、raw等 7 种路由归一化为真正能下载字节的resolve地址避免同一文件出现近重复条目。 第二步读回页面的请求记录Resource Timing文件链接只是冰山一角——网页上的地图是 JavaScript 拉瓦片渲染的这些地址从来不会出现在页面链接里。扩展的答案是读取浏览器的 Resource Timing 缓冲区调用performance.getEntriesByType(resource)拿到本页已经发出过的所有请求 URL。service-scanner.mjs 负责把这些 URL 翻译成人能理解的服务WMS / WMTS / WFS从查询参数里的SERVICE和REQUEST值识别并剥离bbox、LAYERS等操作参数还原出端点WMTS 的GetTile请求还会把瓦片坐标还原成{z}/{x}/{y}模板ArcGIS Feature Service匹配…/FeatureServer/0形式的路径并保留图层索引防止打开时画错图层OGC API Features识别/collections/id/items路径XYZ / TMS 影像瓦片…/13/4096/2048.png这样的路径直接折叠成{z}/{x}/{y}模板几百张瓦片收敛为一个服务PBF 矢量瓦片识别tile.json、tiles.json等 TileJSON同时排除字体文件.pbf字形切片这类长得像瓦片的请求。还有一个巧妙的点矢量瓦片的图层信息不在 URL 里而在样式文档里。因此扩展会先收集所有style.json再按同源原则与瓦片服务配对把样式作为serviceStyle一起带走——这样 GeoLibre 的添加数据对话框打开时图层字段就已经填好了直接可提交。 第三步组装 GeoLibre 地图 URL选中数据集后url-builder.mjs 的buildGeoLibreUrl开始拼装深度链接规则分两种情况文件型数据集把每个数据集追加为?dataURL参数若带有配套样式如name.style.json与同名数据集配对发现则同步追加style参数服务型数据集单独走?add类型serviceUrl端点形式add的值由服务类型映射表决定如 WMS 对应wms、ArcGIS 对应arcgis并携带serviceLayer页面当时渲染的图层名和serviceStyle。组装过程还有明确的防御性约束只允许 HTTP(S) 链接、一次只能打开一个地图服务、地图服务不能与文件混选——这些约束以抛错的方式暴露给弹窗显示而不是静默失败。️ 弹窗交互从扫描到开图的一分钟体验popup.html 是用户唯一看到的界面流程非常克制点击图标后弹窗显示当前站点并进入Reading data links状态扫描结果以列表呈现每项显示名称服务会带图层名区分如WMS service: topp:states、主机名和格式徽章附带的样式还会标出 style顶部提供All / Vector / Raster三个过滤页签配合全选/全不选快捷操作点击Open in GeoLibre新标签页打开组装好的 URL弹窗自动关闭。整个编排逻辑集中在 popup.mjs 的inspectPage()中先扫描文档链接再对所有同源 frame分别读取请求缓冲地图常被嵌在 iframe 里最后合并去重渲染。跨域 frame 会被 Chrome 逐帧拒绝注入但同源的 frame 依然正常返回结果——边界被优雅地接受了。️ 隐私设计为什么它什么都不做扩展的隐私策略写进了 PRIVACY.md核心原则可以总结为activeTab权限只在点击图标那一刻授予当前标签页没有任何常驻站点访问权只读 URL不读响应体——判断 TileJSON 是否矢量瓦片时故意不下载内容因为跨域读取响应需要 host 权限正是这个设计刻意回避的东西转发的是完整 URL含签名参数不转发 Cookie 和会话凭证所以依赖会话认证的链接可能无法打开这是明示的取舍。官方使用文档在 docs/user-guide/chrome-extension.md其中也说明了GeoLibre 会直接抓取选中的链接因此源服务器需允许 CORS 跨域请求。 打包与发布一条命令生成商店安装包发布流程由 scripts/package-chrome-extension.mjs 完成读取 manifest 版本号把 11 个运行时文件4 个脚本 HTML/CSS 4 个图标压缩为固定时间戳的 ZIP输出到dist/目录。在仓库根目录执行npm run build:chrome-extension商店列表文案与权限说明在 STORE_LISTING.md。本地开发则只需打开chrome://extensions开启开发者模式后加载已解压的扩展程序指向extensions/geolibre-chrome目录即可完整说明见 README.md。✅ 总结小而精的参考实现这个扩展总共不到一千行核心代码却把几个关键问题都答得很漂亮怎么发现页面上的数据多来源扫描 置信度分类scanner.mjs怎么发现 JS 渲染的地图服务读 Resource Timing 而非监听网络service-scanner.mjs怎么把结果交给地图参数化深度链接 防御性校验url-builder.mjs怎么做到零隐私负担仅activeTab、无后台、无存储manifest.json。如果你想给自己的项目做一个类似的网页 → 应用桥接工具这套扫描—识别—组装 URL的三段式结构非常值得借鉴。【免费下载链接】GeoLibreA lightweight, cloud-native GIS platform for visualizing, exploring, and analyzing geospatial data. It runs in the web browser, on the desktop, on mobile, and inside Jupyter notebooks.项目地址: https://gitcode.com/GitHub_Trending/ge/GeoLibre创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考