做了个 Chrome 截图插件，自动给网页截图加上浏览器边框和渐变背景

[flankerfc]

Framely

一个 Chrome 插件，截当前网页，自动套一层浏览器窗口边框 + 渐变背景，直接复制到剪贴板或存成 PNG 。适合发产品截图、写文章配图。

• 官网： https://framelyapp.com/
• Chrome 商店： https://chromewebstore.google.com/detail/framely-stylish-browser-f/hgmdobenglfkhkibfipobpplnmbobnbi
• 源码： https://github.com/flanker/framely

特点

• 免费、无账号、无内购
• 截图全程在本地处理，不联网、不上传任何图片
• 开源

为什么又做一个截图工具

我是做 Web 开发的，平时自己也折腾一些网站和小工具，经常要截图发到网上或者发给朋友。

需求很简单：网页所见即所得地截下来，但光秃秃一张不好看，加个浏览器边框和背景会好很多。

这类 Chrome 插件以前是有的，但扩展 Manifest 升到 V3 之后，不少作者没跟进就废了。所以自己写一个，纯前端、没有服务端。（项目其实启动很早了，刚开始还是手工写的，后面也换成 vibe coding 了）

相比另外两种做法：

• 直接截网页 ==> 一张裸图，发出去不太好看
• 用桌面截图工具截浏览器 ==> 会把个人头像、插件图标等信息一起截进去，容易泄露个人信息

现在能做的

• 点插件图标即可截图，一键复制到剪贴板 / 下载
• 8 种渐变色背景

欢迎大家试用 😀😀😀

[LeanTide]

用了一下，感觉可以支持自定义边框圆角大小。 另外 macOS 自带的截屏.app 截出来的效果很好。

[flankerfc]

@LeanTide 多谢反馈。

1. 自定义圆角，好提议！现在自己看看，好像截图圆角还有些白色没有处理对，这个应该一并修复了
2. 系统自带截图，你说的效果好是什么？更清晰吗？我日常桌面截图会用 CleanShot 。但是不足之处就是我上文说的，用它截图浏览器的话，会额外带上很多个人头像、在用的插件甚至收藏夹等信息。这个即降低了截图展示的视觉重点，也暴露了我个人信息。

[cpalead]

op
你这个官网是用 github page 做的吗？
貌似在国内绑了自己的域名就可以访问了

[rkb]

可以做长截图就好了

[flankerfc]

@cpalead 是的，代码库里的 github pages ，纯静态 html （ https://github.com/flanker/framely/tree/master/docs ）

貌似在国内绑了自己的域名就可以访问了 =》 是的，绑定一个域名（国内买的 海外买的 都可以），只不过 github 访问起来速度很慢，而且可能有链接不稳定的问题

[flankerfc]

@rkb okok 我看看这个需求。

主要我自己是用来做产品演示的，一般还都是常规浏览器的长宽比

[LeanTide]

@flankerfc #2 macOS 的“截屏.app”中，使用“所选窗口截图” 截出来的整个窗口，背景是自带渐变的阴影效果的，截出来的图贴到 word 中，会有种跃然纸上的感觉。 建议可以考虑下这种效果，增加一下背景阴影的控制（范围、浓度、颜色等等），你现在这个只是纯色的背景。 另外你这个能隐藏个人头像，收藏夹，地址栏的思路很不错，建议搞个开关，有需要注重隐私的情况可以打开，需要所见即所得的时候就关闭。

[flankerfc]

@LeanTide 哦 确实。这个阴影效果，确实可以增加一下，有些场景更好看。多谢反馈。