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

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

flankerfc 2026-07-29 09:22 1

Framely


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



  • 官网： https://framelyapp.com/

  • Chrome 商店： https://chromewebstore.google.com/detail/framely-stylish-browser-f/hgmdobenglfkhkibfipobpplnmbobnbi

  • 源码： https://github.com/flanker/framely


特点



  • 免费、无账号、无内购

  • 截图全程在本地处理，不联网、不上传任何图片

  • 开源


image.png


image.png


为什么又做一个截图工具


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


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


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


相比另外两种做法：



  • 直接截网页 ==> 一张裸图，发出去不太好看

  • 用桌面截图工具截浏览器 ==> 会把个人头像、插件图标等信息一起截进去，容易泄露个人信息


现在能做的



  • 点插件图标即可截图，一键复制到剪贴板 / 下载

  • 8 种渐变色背景


欢迎大家试用 😀😀😀

最新回复 (8)
  • LeanTide 07-29 09:30
    1楼
    用了一下，感觉可以支持自定义边框圆角大小。 另外 macOS 自带的截屏.app 截出来的效果很好。
  • flankerfc 楼主 07-29 10:07
    2楼
    @LeanTide 多谢反馈。

    1. 自定义圆角，好提议！现在自己看看，好像截图圆角还有些白色没有处理对，这个应该一并修复了
    2. 系统自带截图，你说的效果好是什么？更清晰吗？我日常桌面截图会用 CleanShot 。但是不足之处就是我上文说的，用它截图浏览器的话，会额外带上很多个人头像、在用的插件甚至收藏夹等信息。这个即降低了截图展示的视觉重点，也暴露了我个人信息。
  • cpalead 07-29 10:11
    3楼
    op
    你这个官网是用 github page 做的吗？
    貌似在国内绑了自己的域名就可以访问了
  • rkb 07-29 10:18
    4楼
    可以做长截图就好了
  • flankerfc 楼主 07-29 10:34
    5楼
    @cpalead 是的，代码库里的 github pages ，纯静态 html （ https://github.com/flanker/framely/tree/master/docs ）

    貌似在国内绑了自己的域名就可以访问了 =》 是的，绑定一个域名（国内买的 海外买的 都可以），只不过 github 访问起来速度很慢，而且可能有链接不稳定的问题
  • flankerfc 楼主 07-29 10:35
    6楼
    @rkb okok 我看看这个需求。

    主要我自己是用来做产品演示的，一般还都是常规浏览器的长宽比
  • LeanTide 07-29 11:35
    7楼
    @flankerfc #2 macOS 的“截屏.app”中，使用“所选窗口截图” 截出来的整个窗口，背景是自带渐变的阴影效果的，截出来的图贴到 word 中，会有种跃然纸上的感觉。 建议可以考虑下这种效果，增加一下背景阴影的控制（范围、浓度、颜色等等），你现在这个只是纯色的背景。 另外你这个能隐藏个人头像，收藏夹，地址栏的思路很不错，建议搞个开关，有需要注重隐私的情况可以打开，需要所见即所得的时候就关闭。
  • flankerfc 楼主 07-29 11:45
    8楼
    @LeanTide 哦 确实。这个阴影效果，确实可以增加一下，有些场景更好看。多谢反馈。
* 帖子来源V2EX
附近帖子
返回
飞读
随机推荐