url-save

项目简介

URL Save 是一款基于 Manifest V3 标准开发的 Chrome/Edge 浏览器扩展，解决用户无法快速将网页保存到系统本地的痛点。项目创新性地将网页保存为 HTML 快捷方式文件，而非传统的 .url 格式，避免了 Windows 安全警告问题，实现一键保存、双击即用的流畅体验。

主要特性

• ⚡ 一键保存：点击扩展图标即可保存当前网页，无需确认
• 📄 HTML 快捷方式：生成包含自动跳转脚本的 HTML 文件，双击即用
• 🛡️ 无安全警告：避免 Windows 对 .url 文件的安全标记
• 🎨 美观过渡界面：保存的 HTML 文件包含渐变背景和加载动画
• 🔔 完善反馈机制：成功通知显示保存路径，3 秒自动消失
• 🌐 国际化支持：内置简体中文语言包

技术栈

类别	技术
扩展标准	Manifest V3
后台脚本	Service Worker
编程语言	JavaScript (ES6+)
Chrome APIs	tabs, downloads, notifications
国际化	Chrome i18n API

技术亮点

亮点一：HTML 快捷方式替代 .url 文件

创新性地解决了传统 .url 文件的问题：

方案	.url 文件	HTML 快捷方式
Windows 标记	有安全警告	无警告
用户体验	需确认才能打开	双击即跳转
视觉效果	无	美观加载界面
兼容性	仅 Windows	跨平台

技术实现：

• 使用 <meta http-equiv="refresh"> 实现 0 秒自动跳转
• JavaScript 备用跳转方案（100ms 延迟）
• 美观的加载过渡界面（渐变背景、加载动画）
• 手动访问按钮应对跳转被阻止的情况

<!-- 双重跳转保障 -->
<meta http-equiv="refresh" content="0; url=${encodedUrl}" />
<script>
  setTimeout(function () {
    window.location.href = "${encodedUrl}";
  }, 100);
</script>

亮点二：Service Worker 环境下的文件下载方案

挑战：Service Worker 不支持 Blob URL

解决方案：使用 base64 data URL 替代

// base64 编码处理中文字符
const dataUrl =
  "data:text/html;charset=utf-8;base64," +
  btoa(unescape(encodeURIComponent(fileContent)));

技术要点：

• encodeURIComponent() 处理中文字符
• unescape() 转换为 UTF-8 字节序列
• btoa() 编码为 base64

亮点三：完善的文件名处理逻辑

覆盖多种特殊字符场景：

// 处理 Windows 保留字符
const invalidChars = /[\\/:*?"<>|\x00-\x1f]/g;

// 移除 Emoji（覆盖多种 Unicode 范围）
const emojiPattern = /[\u{1F600}-\u{1F64F}...]/gu;

// 移除零宽字符
const zeroWidthPattern = /[\u200B-\u200D\uFEFF]/g;

处理场景：

• Windows 文件系统限制字符
• Emoji 表情（多种编码范围）
• 零宽字符（不可见但影响显示）
• 长度限制（截取前 200 字符）

亮点四：XSS 防护

// HTML 实体编码防止 XSS
const encodedTitle = title
  .replace(/</g, "&lt;")
  .replace(/>/g, "&gt;")
  .replace(/"/g, "&quot;");

亮点五：一键操作设计

• 无 popup 界面，点击图标直接保存
• 无需用户确认，自动完成所有操作
• 成功通知显示保存路径，3 秒自动消失

亮点六：自包含的图标生成工具

项目包含浏览器端图标生成器：

• 使用 Canvas 2D API 绘制圆角矩形背景
• 绿色渐变主题（#4CAF50 → #2E7D32）
• 自动生成 16/32/48/128 四种尺寸
• 一键下载所有图标

相关链接

• 代码仓库：GitHub