浏览器扩展

Lolly URL Screenshot 扩展让 web 应用可以从你的浏览器内部截取任意网页的屏幕截图。没有它,抓取 URL 就需要桌面应用 - 浏览器页面本身无法读取另一个站点的像素。这个扩展可以做到,使用的是桌面应用所用的同一套抓取机制。

它还以同样的方式完成另外两项工作。粘贴到图片槽位中的网址可以变成该页面的屏幕截图(为此页面截图),扩展也可以读取你指定的某个页面,让 Brand Studio 能够从一个实际存在的网站中提取出品牌信息。每一个请求都要等你在扩展中批准。

它运行在基于 Chromium 的浏览器上:Chrome、Edge、Brave、Arc、Opera - Chrome 111 或更新版本。

在安装它之前,URL Screenshot 仍然可以打开,让你先构图,工具控件顶部会有一条提示说明缺少了什么。

signed by Lolly2026-10-21vector SVG4 paths~2.4k nodes4 groups30 KB自己验证获取已签名文件 signed by Lolly2026-10-21vector SVG4 paths~2.4k nodes4 groups30 KB自己验证获取已签名文件

在你等待期间,每个控件都是可用的:目标 URL、滚动深度、稳定延迟、裁切边距和重新配色。只有抓取本身需要一个宿主。

signed by Lolly2026-10-21vector SVG31 paths~1.7k nodes38 groups30 KB自己验证获取已签名文件 signed by Lolly2026-10-21vector SVG31 paths~1.7k nodes38 groups30 KB自己验证获取已签名文件

安装

从 Chrome 网上应用店

即将推出。 一旦发布,你只需一次点击即可安装,然后重新加载 Lolly。

自行加载(开发者)

这个扩展位于代码仓库中的 shells/chrome-extension/。该文件夹是生产构建版本,只能配合 https://lolly.tools 上的 Lolly 使用。

1. 打开 chrome://extensions。
2. 打开右上角的开发者模式。
3. 点击加载已解压的扩展程序,选择 shells/chrome-extension/ 文件夹。
4. 重新加载 Lolly - URL Screenshot 现在可以在浏览器中使用了。

如果要连接本地开发服务器,请运行 pnpm run pack:chrome-extension:dev,改为加载 dist/chrome-extension-dev。该软件包还接受 http://localhost:5173,其名称中带有 Development。

工作原理

• 一段小脚本告诉 Lolly 扩展已存在,于是 URL Screenshot 无需进一步设置就能保存抓取结果。
• 每个请求都由你批准。当 Lolly 发出请求时,扩展会打开它自己的 Approve page request 窗口,显示发起请求的站点、它要的是屏幕截图还是页面内容,以及页面地址。在你按下 Approve once 之前,不会读取任何内容。点击 Cancel 或关闭该窗口,请求即告结束。
• 你第一次批准某个站点的请求时,Chrome 还会询问扩展是否可以访问该站点。你允许之后,Chrome 会保留这项访问权限,但之后的每个请求仍然需要各自的 Approve once。
• 一次批准只对应一个请求,并在 30 秒后失效。同一时间只能有一个请求在等待或运行,已批准的请求会在 55 秒后停止。如果 Lolly 页面关闭或发生跳转,或者目标页面转到了另一个站点,请求就会被取消。
• 你批准之后,扩展会在后台标签页中打开目标页面,通过 DevTools 协议抓取(与桌面应用所用的同一个 Page.captureScreenshot),然后关闭该标签页,并把图像交回给发出请求的那个 Lolly 标签页。
• 它完全在你的浏览器中、在你的网络上运行 - 所以抓取 localhost 或内部站点也能正常工作。页面是用你的浏览器会话加载的,所以你已登录的页面可能会在结果中显示私密信息。抓取内容本身从不会被上传到任何地方;唯一的网络流量就是你自己的浏览器加载你要求截取的页面。

在抓取运行期间,你可能会在临时标签页上短暂看到一条“……已开始调试此浏览器”的提示条。这是 DevTools 协议在起作用;截图完成后它会自动消失。

为 Brand Studio 读取网站

Brand Studio 中的网站来源可以从你已有的站点着手创建品牌。在基于 Chromium 的浏览器上,读取工作由扩展完成;在桌面应用上,由原生抓取完成同样的工作;而在没有安装扩展的普通浏览器上,这个选项根本不会提供。

按下按钮后会发生什么:

• 一个地址,一个页面。你批准之后,扩展会在同类型的后台标签页中打开它,读取渲染后的标记、样式表文本以及少量图标和 Logo 图片,然后关闭该标签页。它不会跟随链接,也不会爬取。
• 托管在别处的样式表(CDN、字体服务)也会被抓取,因为页面的颜色和字体信息就存在其中。跨源请求不会携带你的 Cookie;同源请求会携带,与页面本身的行为完全一致。
• 一切都有上限 - 样式表、图片和字节数都是有限的 - 这样一个恶意或半失效的页面只会返回部分素材,而不会导致挂起。
• 字节数据直接返回给发起请求的 Lolly 标签页。解析为颜色、字体和 Logo 的过程在你的设备上进行;没有任何内容被上传。

粘贴地址只是填入字段而已。在你开始读取并按下 Approve once 之前,不会读取任何内容。

安装之后

重新加载 Lolly 标签页。“获取扩展”提示会消失,URL Screenshot(在“实用工具”下)可以把抓取结果保存为文件,该工具也会在批处理模式中变为可用。

权限

它的 manifest.json 声明了四项权限,外加它按站点逐一申请的站点访问权限:

• debugger - 通过 DevTools 协议驱动后台标签页。截图正是靠这个权限完成的。
• tabs - 打开临时后台标签页并在之后将其关闭,同时检查自你批准请求以来,Lolly 页面和目标页面是否都没有发生跳转。
• scripting - 在你指定的站点内运行单页读取器,供 Brand Studio 的网站来源使用。
• storage - 只在会话存储中记录它打开的标签页的 id,这样即使浏览器在读取过程中挂起了扩展,该标签页仍能被关闭。下次启动时会被清除;不存储任何关于你的信息。
• optional_host_permissions: ["http:///", "https:///"] - 站点访问权限,安装时不会授予。当你按下 Approve once 时,扩展会向 Chrome 申请该请求所涉的那一个站点的访问权限,Chrome 会在每个站点第一次时询问你。

它只会读取你批准的那一个页面,不会读取或传输你的浏览数据 - 没有任何内容会被上传到任何地方。

清单文件还设置了 minimum_chrome_version: 111。当前版本是 0.4.0。

故障排查

• 仍然看到“获取扩展”? 重新加载 Lolly 标签页 - 检测发生在页面加载时。
• 在这个站点上没有反应? 扩展只在 https://lolly.tools 上起作用,开发包中还包括 http://localhost:5173。其他来源(例如自行托管的 Lolly 副本)需要另外构建一个扩展,并在 manifest.json 和 policy.js 中都列出该来源。只编辑 manifest 已经不再有效。
• 抓取失败? 检查该 URL 是否可访问,并以 http:// 或 https:// 开头。有些页面会主动阻止自动化抓取。如果你按了 Cancel、关闭了批准窗口,或者等待超过 30 秒,请重新开始抓取。