Difframe

Difframe 是一款专为前端开发者设计的浏览器扩展工具，它能够将参考网站或 Figma 原型以实时 iframe 的形式叠加在你正在构建的页面上，而非静态截图。这意味着参考内容始终保持最新状态，滚动行为也与真实页面完全一致，让你在开发过程中获得最真实的对比体验。

核心功能

Difframe 的核心在于其独特的实时叠加技术。它通过 iframe 加载参考页面，确保参考内容与源网站同步更新，不会因截图过期而误导你的开发判断。同时，Difference 混合模式是另一大亮点：开启后，页面中所有匹配的区域会变为黑色，而差异部分则清晰可见，让你一眼就能定位到需要调整的地方。

主要特性

• 实时 iframe 叠加：参考页面始终最新，滚动同步，体验真实。
• Difference 混合模式：一键切换，差异区域高亮显示，快速定位问题。
• 灵活的预设配置：可保存 URL、透明度、缩放、尺寸、位置和混合模式等参数，并支持按标签页、页面或主机名进行作用域设置。
• 多标签对比：支持同时打开多个标签页，分别配置不同预设，方便进行桌面端与移动端的并行比较。
• 免费开源：完全免费，基于 MIT 协议开源，无任何跟踪，放心使用。

适用场景

Difframe 适用于各种前端开发场景，无论是像素级还原设计稿、响应式布局调试，还是多版本对比，它都能显著提升你的开发效率和准确性。

总而言之，Difframe 是一款强大且易用的开发辅助工具，它将繁琐的对比过程简化为一键操作，让你更专注于代码本身，快速交付高质量的前端作品。