My Local New Tab

一个简洁、本地化、功能丰富的浏览器新标签页扩展

📦 更新日志

版本	日期	更新内容
v2.15	2026-2	修改获取网页略缩图标逻辑，成功率更高
v2.1	2025-12	添加书签搜索；支持导入 Edge/Chrome/Safari 导出的书签 HTML 文件；支持批量选择、转移；调整界面大小；改进图标缓存策略；修复些许 bug
v2.0	2025-12	重构背景图加载逻辑（同步动画、智能缓存）；Gist 支持最大 50MB 背景图；本地与 WebDAV 模式无大小限制；优化文件夹标题显示效果；支持由 Wetab 直接导出的.data 格式文件
v1.5.3	2025-12	可修改标签的透明度
v1.5.2	2025-12	限制 gist 图片大小，提供压缩，确保 gist 同步时能正常显示背景图
v1.5.1	2025-12	新建标签页时默认显示第一个分类
v1.5	-	完成所有预期功能
v1.0	-	完成基本框架搭建；将 Wetab 导出配置文件后缀改为 json 后可导入该拓展

简体中文

免责声明

本项目代码 100%由 ai 编写，感谢 Claude Sonnet 4.5，Claude Opus 4.5，Gemini3 Pro，gpt-5.1-Codex-Max 的大力支持

✨ 功能特性

🎯 核心功能

📑 智能书签管理
- 支持书签和文件夹两种类型
- 拖拽排序，长按即可拖动
- 支持文件夹嵌套，拖拽到文件夹即可收纳
- 书签卡片支持自定义图标（自动获取/自定义上传/纯色+文字）
- 多级图标降级策略，确保显示稳定
🗂️ 分类系统
- 无限分类，侧边栏管理
- 分类支持拖拽排序
- 每个分类独立管理书签
🔍 多引擎搜索
- 支持 Google、Bing、百度、Yahoo
- 快速切换搜索引擎
- 搜索框集成在顶部
🎨 自定义背景
- 本地模式：上传本地图片或使用图片链接
- 云端模式：从 WebDAV/Gist 自动同步背景图
- 可调节透明度（0-100%）
- 支持多种图片格式（jpg/png/webp/avif/gif）
- 实时预览效果

💾 数据存储与同步

支持四种存储方式，满足不同使用场景：

浏览器存储（默认）
- 数据保存在扩展专属的 storage.local
- 仅绑定当前设备/浏览器配置文件
- 无容量限制，支持大量书签和大尺寸背景图
- 物理路径：Edge 用户数据目录下的 Local Extension Settings/<扩展ID>
账号同步
- 通过浏览器账号的 chrome.storage.sync 自动同步
- 适合多设备共享
- 受浏览器同步配额限制（约 100KB）
WebDAV 同步
- 支持任何兼容 WebDAV 协议的服务（Nextcloud、坚果云等）
- 需要可外网访问的 WebDAV 端点
- 支持 HTTPS + 基础认证
- 背景图无大小限制，支持二进制存储
- 配置示例：https://dav.example.com/remote.php/dav/files/<user>/MyLocalNewTab-data.json
GitHub Gist 同步
- 确保可以使用 git 访问仓库以避免权限或网络问题
- 使用 GitHub Personal Access Token（需 gist 权限）
- 可指定现有 Gist ID，或留空自动创建私有 Gist
- 默认文件名 MyLocalNewTab-data.json，可自定义
- 背景图限制：最大支持 50MB
- Token 和 Gist ID 仅保存在本地

📤 数据导入导出

导出：JSON 格式，可用于备份或迁移
导入：支持两种模式
- 合并模式：在现有数据基础上追加（不重复网址）
- 覆盖模式：完全替换当前数据
兼容性：支持本扩展导出的 JSON 格式、WeTab 导出的 .data 格式、以及浏览器导出的书签 HTML 文件

💻 用户体验

主题：自动跟随系统深色/浅色模式
动画：提供过渡动画和交互反馈
拖拽：
- 书签卡片：长按激活拖拽（带视觉反馈）
- 分类列表：长按激活拖拽
- 支持跨文件夹拖动
- 拖拽到文件夹卡片可自动收纳
- 实时占位符提示
图标缓存：自动缓存网站图标，提升加载速度
View Transitions API：支持浏览器原生页面过渡动画

🚀 快速开始

安装步骤

下载项目

git clone https://github.com/everlst/MyLocalNewTab.git
cd MyLocalNewTab

加载扩展
- 打开 Edge/Chrome 浏览器
- 访问 edge://extensions/（Edge）或 chrome://extensions/（Chrome）
- 开启"开发者模式"
- 点击"加载已解压的扩展程序"
- 选择项目文件夹 MyLocalNewTab
开始使用
- 打开新标签页，扩展会自动生效
- 默认包含 Google、Bilibili、GitHub 三个示例书签

📖 详细功能说明

书签管理

添加书签

点击书签网格中的"添加"卡片
选择类型：
- 网址：添加一个网站链接
- 文件夹：创建一个书签文件夹
填写信息：
- 网址（仅网址类型）：网站的完整 URL
- 标题：显示名称
- 图标（仅网址类型）：
  - 自动获取 Favicon：从多个图标源自动获取高清图标
  - 自定义图标：上传本地图片或使用纯色+文字
- 分类：选择所属分类

编辑/删除书签

鼠标悬停在书签卡片上
点击右上角的 ✎（编辑）或 ×（删除）按钮

拖拽排序

激活拖拽：长按书签卡片（卡片会放大并显示阴影）
移动：拖动到目标位置（会显示蓝色虚线占位符）
释放：松开鼠标完成移动
跨分类移动：可拖拽到不同分类
收纳到文件夹：拖拽到文件夹卡片上（文件夹会高亮提示）

文件夹功能

创建文件夹：添加书签时选择"文件夹"类型
打开文件夹：点击文件夹卡片
在文件夹内添加：文件夹弹窗中点击"添加"
移出文件夹：在文件夹内拖拽书签到外部
自动解散：文件夹仅剩一个书签时自动解散
嵌套文件夹：支持文件夹内创建子文件夹，最多支持 3 级文件夹

分类管理

添加分类

点击侧边栏底部的"+"按钮
输入分类名称
点击"保存"

切换分类

点击侧边栏的分类名称
主区域会显示该分类下的所有书签

删除分类

鼠标悬停在分类上
点击右侧的 × 按钮
注意：至少保留一个分类

分类排序

长按分类名称 90ms 激活拖拽
拖动到目标位置
松开完成排序

搜索功能

网页搜索

切换搜索引擎：点击搜索框左侧的下拉菜单
搜索：在搜索框输入关键词，按 Enter 键
支持的搜索引擎：
- Google（默认）
- Bing
- 百度
- Yahoo

书签搜索

打开搜索：点击侧边栏顶部的搜索框
输入关键词：搜索框会实时过滤匹配的书签
搜索范围：搜索所有分类中的书签标题和网址
清除搜索：点击搜索框右侧的 × 按钮或清空输入
显示结果：匹配的书签会显示在独立的搜索结果面板中，显示搜索结果数量

背景设置

本地模式

打开设置 → 外观 → 背景设置
选择"本地"
选择上传方式：
- 本地上传：选择图片文件
- 图片链接：粘贴图片 URL（推荐 4K 用户使用图床，无大小限制）
调节透明度（0-100%）
实时预览效果

⚠️ Gist 背景图性能提示
Gist 将图片存储为 Base64 文本格式，存在以下限制：

Base64 编码会使体积增加约 33%

大图片会导致同步和加载速度明显变慢

硬限制：50MB（超过直接拒绝）

WebDAV 无大小限制，支持二进制存储，性能更好，推荐大图片使用

云端模式

打开设置 → 外观 → 背景设置
选择"云端同步"
确保已配置 WebDAV 或 Gist 同步
点击"刷新云端"或"上传/修改"
扩展会自动在远程数据文件同目录查找 background.(jpg|png|webp|avif|gif) 文件

设置页面

点击右下角的齿轮按钮 ⚙ 打开设置页面。

外观设置

背景图：详见"背景设置"部分
透明度：拖动滑块调节（0-100%）
实时预览：所见即所得

数据存储位置

选择四种存储方式之一：

浏览器存储
- 仅此设备
- 无容量限制
- 数据保存在扩展专属存储区域
账号同步
- 跨设备同步
- 容量限制约 100KB
- 数据过大时请改用浏览器存储或远程同步
WebDAV 同步
- 填写配置：
  - 文件地址：直接指向 JSON 文件的完整 URL
  - 用户名：WebDAV 账号
  - 密码：WebDAV 密码或应用专用密码
- 点击"应用配置"验证
- 验证成功后务必选择同步方向：
  - 本地覆盖云端：上传本地数据到远程
  - 合并后上传并生效：合并本地和远程数据
  - 云端覆盖本地：下载远程数据覆盖本地
GitHub Gist 同步 （推荐）
- 填写配置：
  - GitHub Token：创建 Token（仅需 gist 权限）
  - Gist ID：留空则自动创建
  - 文件名：默认 MyLocalNewTab-data.json
- 点击"应用配置"验证
- 验证成功后务必选择同步方向

数据转移

导出数据：点击"导出数据"按钮，下载 JSON 文件
导入数据：
1. 选择数据来源：
  - 由当前扩展导出的 JSON 数据
  - 由 WeTab 导出的数据（.data 格式）
  - 由 Edge/Chrome/Safari 导出的书签 HTML 文件
2. 选择导入模式：
  - 合并：在现有数据基础上追加（去重）
  - 覆盖：替换当前所有数据
3. 点击"导入数据"，选择文件

导入浏览器书签

本扩展支持导入 Edge/Chrome/Safari 等浏览器导出的标准书签 HTML 文件。

如何导出浏览器书签：

Edge/Chrome：
- 打开 edge://favorites/ 或 chrome://bookmarks/
- 点击右上角 ⋯ → 导出书签
- 保存为 HTML 文件
Safari：
- 文件 → 导出书签
- 保存为 HTML 文件

导入步骤：

打开设置 → 数据转移 → 导入数据
选择数据来源：由 Edge/Chrome/Safari 导出的书签
选择导入模式（合并/覆盖）
选择 HTML 书签文件

导入说明：

支持文件夹结构（转换为本扩展的文件夹）
自动提取网站图标（Favicon）
文件夹会按浏览器中的层级关系导入

关键常量配置

存储键：

const STORAGE_KEYS = {
	DATA: "MyLocalNewTabData",
	SETTINGS: "MyLocalNewTabSettings",
	BACKGROUND_IMAGE: "MyLocalNewTabBgImage",
};

同步配置：

const REMOTE_FETCH_TIMEOUT = 12000; // 12秒超时
const DEFAULT_REMOTE_FILENAME = "MyLocalNewTab-data.json";
const BACKGROUND_EXTENSIONS = ["jpg", "jpeg", "png", "webp", "avif", "gif"];

缓存配置：

const MAX_CACHED_ICON_BYTES = 500 * 1024; // 单张图标最大 500KB

拖拽配置：

const DRAG_LONG_PRESS_MS = 90; // 长按 90ms 激活拖拽

Gist 背景图配置：

const GIST_IMAGE_MAX_BYTES = 10 * 1024 * 1024; // 10MB 压缩目标
const GIST_HARD_LIMIT = 50 * 1024 * 1024; // 50MB 硬限制
const GIST_COMPRESS_THRESHOLD = 10 * 1024 * 1024; // 超过 10MB 提示压缩
const GIST_IMAGE_MAX_WIDTH = 3840; // 4K 分辨率上限
const GIST_JPEG_INITIAL_QUALITY = 0.85; // JPEG 压缩初始质量

🔄 数据同步

WebDAV 同步详细配置

服务商举例

Nextcloud：开源私有云存储
坚果云：国内 WebDAV 服务
群晖 NAS：自建 WebDAV 服务器
其他：任何支持 WebDAV 协议的服务

配置步骤

准备 WebDAV 服务
- 确保可外网访问（或在内网环境使用）
- 启用 WebDAV 协议
- 创建用户账号并赋予读写权限
获取配置信息
- 文件地址：完整的 JSON 文件 URL
  - 示例（Nextcloud）：https://cloud.example.com/remote.php/dav/files/username/MyLocalNewTab-data.json
  - 示例（坚果云）：https://dav.jianguoyun.com/dav/MyLocalNewTab-data.json
- 用户名：WebDAV 账号
- 密码：WebDAV 密码或应用专用密码（推荐）
在扩展中配置
- 打开设置 → 数据存储位置 → 选择 WebDAV 同步
- 填写文件地址、用户名、密码
- 点击"应用配置"验证连接
选择同步方向
- 验证成功后，选择一次性同步方式：
  - 本地覆盖云端：上传本地数据
  - 合并后上传并生效：合并本地和远程数据
  - 云端覆盖本地：下载远程数据
自动同步
- 完成首次同步后，后续操作将自动使用该模式
- 每次保存时自动上传到 WebDAV

常见问题

401 Unauthorized：用户名或密码错误
404 Not Found：文件路径不存在（首次同步会自动创建）
403 Forbidden：账号权限不足
超时：网络不稳定或服务器响应慢

GitHub Gist 同步详细配置

配置步骤

创建 Personal Access Token
- 访问 GitHub Token 设置
- 点击"Generate new token" → "Generate new token (classic)"
- 勾选 gist 权限（仅需此权限）
- 生成并复制 Token（格式：ghp_xxx 或 github_pat_xxx）
在扩展中配置
- 打开设置 → 数据存储位置 → 选择 GitHub Gist 同步
- 填写 GitHub Token
- Gist ID：
  - 留空：首次保存时自动创建私有 Gist
  - 填写：使用现有 Gist（从 Gist URL 中获取）
- 文件名：默认 MyLocalNewTab-data.json，可自定义
验证和同步
- 点击"应用配置"验证 Token
- 选择同步方向（同 WebDAV）

安全说明

Token 和 Gist ID 仅保存在浏览器本地
建议使用 Fine-grained Token 并限制权限
定期轮换 Token 以提高安全性

👨‍💻 开发指南

代码结构

JavaScript 主要模块：

数据管理：
- loadData() / saveData()：数据读写
- normalizeDataStructure()：数据格式校验
书签操作：
- findBookmarkLocation()：定位书签
- moveBookmarkTo()：移动书签
- removeBookmarkById()：删除书签
拖拽系统：
- setupBookmarkCardDrag()：初始化拖拽
- dragState：拖拽状态管理
图标系统：
- generateHighResIconMeta()：生成图标源列表
- cacheIconIfNeeded()：缓存图标
- resolveBookmarkIconSource()：解析图标源
同步系统：
- loadDataFromWebDAV() / saveDataToWebDAV()
- loadDataFromGist() / saveDataToGist()
渲染系统：
- renderApp()：渲染整个应用
- renderCategories()：渲染分类列表
- renderBookmarks()：渲染书签网格

本地开发

克隆项目

git clone https://github.com/everlst/MyLocalNewTab.git
cd MyLocalNewTab

在浏览器中加载扩展（见"快速开始"部分）
修改代码
- 编辑 js/script.js、css/style.css 或 newtab.html
- 在扩展管理页面点击刷新按钮
- 打开新标签页查看效果
调试
- 右键点击新标签页 → 检查
- 使用 Chrome DevTools 调试

❓ 常见问题

1. 为什么有些网站图标加载失败？

原因：部分网站没有提供 Favicon，或图标源被 CORS 策略阻止
解决：
- 使用"自定义图标"功能上传本地图片
- 或使用"纯色+文字"创建简单图标

2. 背景图片为什么不显示？

原因：
- 图片格式不支持
- 图片链接失效
- 浏览器存储配额已满
- 受服务商限制，图片尺寸太大
解决：
- 确保图片格式为 jpg/png/webp/avif/gif
- 使用图片链接模式（无大小限制）
- 检查浏览器存储空间（edge://settings/storageAccessPermissions）
- 使用自建的 WebDav 服务（已验证稳定性），或使用更小文件大小的图片

3. WebDAV 同步失败怎么办？

检查项：
- 文件地址是否正确（直接指向 JSON 文件）
- 用户名和密码是否正确
- 网络是否可访问 WebDAV 服务器
- WebDAV 账号是否有读写权限
调试方法：
- 打开浏览器控制台（F12）查看错误信息
- 尝试在浏览器地址栏直接访问文件地址

4. 数据会丢失吗？

本地存储：
- 数据保存在浏览器扩展存储区域
- 卸载扩展会清空数据
- 建议定期导出备份
远程同步：
- WebDAV/Gist 会保留远程副本
- 可随时从远程恢复

5. 如何迁移到其他设备？

方法 1：导出/导入
- 在旧设备导出数据（JSON 文件）
- 在新设备导入数据
方法 2：使用同步功能
- 在旧设备配置 WebDAV/Gist 同步
- 在新设备配置相同的同步账号
- 选择"云端覆盖本地"

6. 扩展与其他新标签页扩展冲突？

浏览器只允许一个扩展覆盖新标签页
禁用其他新标签页扩展即可

7. Gist 同步背景图很慢怎么办？

原因：
- Gist 将图片存储为 Base64 文本格式，大图片会导致：
  - 体积增加约 33%（Base64 编码开销）
  - 同步速度明显变慢
  - 浏览器解码 Base64 耗时较长
解决方案：
- 方案 1：选择更小体积的图片
- 方案 2：切换到 WebDAV 存储（支持二进制，性能更好，无大小限制）
- 方案 3：切换至本地模式，使用图床服务（如 imgur.com、sm.ms）+ "图片链接"模式（无大小限制，加载最快）

8. 如何备份数据？

手动备份：
- 打开设置 → 数据转移 → 导出数据
- 保存 JSON 文件到安全位置
自动备份：
- 使用 WebDAV/Gist 同步
- 定期检查远程数据

📄 许可证

本项目采用双重许可证：

🆓 AGPL-3.0 用于开源使用（免费）
💼 商业许可证 用于商业使用（付费）

开源使用 (AGPL-3.0)

免费提供给个人、开源项目和愿意以下条件的公司：

在 AGPL-3.0 许可证下发布其修改
与使用该软件的用户共享源代码

商业使用

如需在闭源产品或服务中使用本软件且不受 AGPL-3.0 要求的约束，请联系我们获取商业许可证。

联系方式: everlastingk@163.com

详见 LICENSE 文件。

📮 联系方式

GitHub：@everlst
Issues：提交问题

English

Note: This English version is translated by AI

Disclaimer

This project is 100% coded by AI. Thanks to Claude Sonnet 4.5, Gemini3 Pro, and gpt-5.1-Codex-Max for their great support.

📋 Table of Contents

Features
Quick Start
Detailed Feature Description
Key Configuration Constants
Data Synchronization
Development Guide
FAQ
License
Contact

✨ Features

🎯 Core Features

📑 Smart Bookmark Management
- Support for both bookmarks and folders
- Drag-and-drop sorting with long-press activation
- Nested folder support, drag to folder for organization
- Custom bookmark icons (auto-fetch Favicon / custom upload / solid color + text)
- Multi-level icon fallback strategy for stable display
🗂️ Category System
- Unlimited categories with sidebar management
- Drag-and-drop category reordering
- Independent bookmark management per category
🔍 Multi-Engine Search
- Support for Google, Bing, Baidu, Yahoo
- Quick search engine switching
- Integrated search bar at the top
🎨 Custom Background
- Local Mode: Upload local images or use image URLs
- Cloud Mode: Auto-sync background from WebDAV/Gist
- Adjustable opacity (0-100%)
- Support for multiple image formats (jpg/png/webp/avif/gif)
- Real-time preview

💾 Data Storage & Sync

Four storage options for different use cases:

Browser Storage (Default)
- Data saved in extension-specific storage.local
- Bound to current device/browser profile only
- Unlimited capacity, supports many bookmarks and large background images
- Physical path: Local Extension Settings/<Extension ID> in Edge user data directory
Account Sync
- Auto-sync via browser account's chrome.storage.sync
- Suitable for multi-device sharing
- Limited by browser sync quota (~100KB)
WebDAV Sync
- Support for any WebDAV-compatible service (Nextcloud, Nutstore, etc.)
- Requires internet-accessible WebDAV endpoint
- Support for HTTPS + Basic Authentication
- No size limit for background images, supports binary storage
- Example: https://dav.example.com/remote.php/dav/files/<user>/MyLocalNewTab-data.json
GitHub Gist Sync
- Ensure you can access the repository using git to avoid permission or network issues
- Use GitHub Personal Access Token (requires gist permission)
- Specify existing Gist ID, or leave empty to auto-create private Gist
- Default filename MyLocalNewTab-data.json, customizable
- Background image limit: Max 50MB
- Token and Gist ID stored locally only

📤 Data Import/Export

Export: JSON format for backup or migration
Import: Two modes supported
- Merge Mode: Append to existing data (no duplicate URLs)
- Overwrite Mode: Replace all current data
Compatibility: Support for importing JSON from this extension, .data format from WeTab, and standard bookmark HTML files from browsers

🎭 User Experience

Theme: Auto-follow system dark/light mode
Animations: Smooth transitions and interactive feedback
Drag & Drop:
- Bookmark cards: Long-press to activate drag (with visual feedback)
- Category list: Long-press to activate drag
- Support for cross-folder dragging
- Drag to folder card for auto-organization
- Real-time placeholder hints
Icon Caching: Auto-cache website icons for faster loading
View Transitions API: Support for native browser page transitions

🚀 Quick Start

Installation Steps

Download the project

git clone https://github.com/everlst/MyLocalNewTab.git
cd MyLocalNewTab

Load the extension
- Open Edge/Chrome browser
- Visit edge://extensions/ (Edge) or chrome://extensions/ (Chrome)
- Enable "Developer mode"
- Click "Load unpacked"
- Select the MyLocalNewTab folder
Start using
- Open a new tab, the extension will activate automatically
- Default bookmarks include Google, Bilibili, GitHub

📖 Detailed Feature Description

Bookmark Management

Add Bookmark

Click the "Add" card in the bookmark grid
Select type:
- URL: Add a website link
- Folder: Create a bookmark folder
Fill in information:
- URL (URL type only): Complete website URL
- Title: Display name
- Icon (URL type only):
  - Auto-fetch Favicon: Automatically get HD icons from multiple sources
  - Custom icon: Upload local image or use solid color + text
- Category: Select category

Edit/Delete Bookmark

Hover over a bookmark card
Click ✎ (edit) or × (delete) button in the top-right corner

Drag & Drop Sorting

Activate drag: Long-press bookmark card (card will enlarge with shadow)
Move: Drag to target position (blue dashed placeholder will appear)
Release: Release mouse to complete move
Cross-category move: Can drag to different categories
Organize into folder: Drag onto folder card (folder will highlight)

Folder Features

Create folder: Select "Folder" type when adding bookmark
Open folder: Click folder card
Add inside folder: Click "Add" in folder modal
Move out of folder: Drag bookmark outward inside folder
Auto-dissolve: Folder auto-dissolves when only one bookmark remains
Nested folders: Support creating subfolders, up to 3 levels

Category Management

Add Category

Click "+" button at the bottom of sidebar
Enter category name
Click "Save"

Switch Category

Click category name in sidebar
Main area will display all bookmarks in that category

Delete Category

Hover over a category
Click × button on the right
Note: At least one category must remain

Reorder Categories

Long-press category name for 90ms to activate drag
Drag to target position
Release to complete reordering

Search Function

Web Search

Switch search engine: Click dropdown menu on the left of search bar
Search: Enter keywords in search bar, press Enter
Supported search engines:
- Google (default)
- Bing
- Baidu
- Yahoo

Bookmark Search

Open search: Click search box at the top of sidebar
Enter keywords: Search box filters matching bookmarks in real-time
Search scope: Searches bookmark titles and URLs across all categories
Clear search: Click × button on the right of search box or clear input
Display results: Matching bookmarks appear in separate search results panel with result count

Background Settings

Local Mode

Open Settings → Appearance → Background Settings
Select "Local"
Choose upload method:
- Local Upload: Select image file
- Image Link: Paste image URL (recommended for 4K users, no size limit)
Adjust opacity (0-100%)
Real-time preview

⚠️ Gist Background Image Performance Notice
Gist stores images as Base64 text format with the following limitations:

Base64 encoding increases size by approximately 33%

Large images significantly slow down sync and loading

Hard limit: 50MB (exceeding this will be rejected)

WebDAV has no size limit, supports binary storage, better performance, recommended for large images

Cloud Mode

Open Settings → Appearance → Background Settings
Select "Cloud Sync"
Ensure WebDAV or Gist sync is configured
Click "Refresh Cloud" or "Upload/Modify"
Extension will auto-search for background.(jpg|png|webp|avif|gif) in remote data directory

Settings Page

Click the gear button ⚙ in the bottom-right corner to open settings.

Appearance Settings

Background: See "Background Settings" section
Opacity: Drag slider to adjust (0-100%)
Real-time preview: What you see is what you get

Data Storage Location

Choose one of four storage methods:

Browser Storage (Recommended)
- This device only
- Unlimited capacity
- Data saved in extension-specific storage area
Account Sync
- Cross-device sync
- ~100KB capacity limit
- Use browser storage or remote sync if data is too large
WebDAV Sync
- Configuration:
  - File URL: Complete URL pointing to JSON file
  - Username: WebDAV account
  - Password: WebDAV password or app-specific password
- Click "Apply Configuration" to verify
- After successful verification, choose sync direction:
  - Local to Cloud: Upload local data to remote
  - Merge and Upload: Merge local and remote data
  - Cloud to Local: Download remote data to overwrite local
GitHub Gist Sync (Recommended)
- Configuration:
  - GitHub Token: Create Token (only gist permission needed)
  - Gist ID: Leave empty to auto-create
  - Filename: Default MyLocalNewTab-data.json
- Click "Apply Configuration" to verify
- After successful verification, choose sync direction

Data Transfer

Export Data: Click "Export Data" button to download JSON file
Import Data:
1. Select data source:
  - JSON data exported by current extension
  - Data exported by WeTab (.data format)
  - Bookmark HTML files exported by Edge/Chrome/Safari
2. Select import mode:
  - Merge: Append to existing data (deduplicate)
  - Overwrite: Replace all current data
3. Click "Import Data", select file

Import Browser Bookmarks

This extension supports importing standard bookmark HTML files exported from Edge/Chrome/Safari browsers.

How to export browser bookmarks:

Edge/Chrome:
- Open edge://favorites/ or chrome://bookmarks/
- Click ⋯ in top-right corner → Export bookmarks
- Save as HTML file
Safari:
- File → Export Bookmarks
- Save as HTML file

Import steps:

Open Settings → Data Transfer → Import Data
Select data source: Bookmarks exported by Edge/Chrome/Safari
Select import mode (Merge/Overwrite)
Choose HTML bookmark file

Import notes:

Supports folder structure (converted to extension folders)
Auto-extracts website icons (Favicons)
Folders imported according to browser hierarchy

⚙️ Key Configuration Constants

Storage Keys:

const STORAGE_KEYS = {
	DATA: "MyLocalNewTabData",
	SETTINGS: "MyLocalNewTabSettings",
	BACKGROUND_IMAGE: "MyLocalNewTabBgImage",
};

Sync Configuration:

const REMOTE_FETCH_TIMEOUT = 12000; // 12 second timeout
const DEFAULT_REMOTE_FILENAME = "MyLocalNewTab-data.json";
const BACKGROUND_EXTENSIONS = ["jpg", "jpeg", "png", "webp", "avif", "gif"];

Cache Configuration:

const MAX_CACHED_ICON_BYTES = 500 * 1024; // Max 500KB per icon

Drag Configuration:

const DRAG_LONG_PRESS_MS = 90; // 90ms long-press to activate drag

Gist Background Image Configuration:

const GIST_IMAGE_MAX_BYTES = 10 * 1024 * 1024; // 10MB compression target
const GIST_HARD_LIMIT = 50 * 1024 * 1024; // 50MB hard limit
const GIST_COMPRESS_THRESHOLD = 10 * 1024 * 1024; // Prompt compression above 10MB
const GIST_IMAGE_MAX_WIDTH = 3840; // 4K resolution cap
const GIST_JPEG_INITIAL_QUALITY = 0.85; // JPEG compression initial quality

🔄 Data Synchronization

WebDAV Sync Detailed Configuration

Service Examples

Nextcloud: Open-source private cloud storage
Nutstore: Domestic WebDAV service (坚果云)
Synology NAS: Self-hosted WebDAV server
Others: Any service supporting WebDAV protocol

Configuration Steps

Prepare WebDAV Service
- Ensure internet accessibility (or use in local network)
- Enable WebDAV protocol
- Create user account with read/write permissions
Get Configuration Info
- File URL: Complete JSON file URL
  - Example (Nextcloud): https://cloud.example.com/remote.php/dav/files/username/MyLocalNewTab-data.json
  - Example (Nutstore): https://dav.jianguoyun.com/dav/MyLocalNewTab-data.json
- Username: WebDAV account
- Password: WebDAV password or app-specific password (recommended)
Configure in Extension
- Open Settings → Data Storage Location → Select WebDAV Sync
- Fill in file URL, username, password
- Click "Apply Configuration" to verify connection
Choose Sync Direction
- After successful verification, choose one-time sync method:
  - Local to Cloud: Upload local data
  - Merge and Upload: Merge local and remote data
  - Cloud to Local: Download remote data
Auto Sync
- After first sync, subsequent operations will auto-use this mode
- Auto-upload to WebDAV on each save

Common Issues

401 Unauthorized: Incorrect username or password
404 Not Found: File path doesn't exist (will auto-create on first sync)
403 Forbidden: Insufficient account permissions
Timeout: Unstable network or slow server response

GitHub Gist Sync Detailed Configuration

Configuration Steps

Create Personal Access Token
- Visit GitHub Token Settings
- Click "Generate new token" → "Generate new token (classic)"
- Check gist permission (only this permission needed)
- Generate and copy Token (format: ghp_xxx or github_pat_xxx)
Configure in Extension
- Open Settings → Data Storage Location → Select GitHub Gist Sync
- Fill in GitHub Token
- Gist ID:
  - Leave empty: Auto-create private Gist on first save
  - Fill in: Use existing Gist (get from Gist URL)
- Filename: Default MyLocalNewTab-data.json, customizable
Verify and Sync
- Click "Apply Configuration" to verify Token
- Choose sync direction (same as WebDAV)

Security Notes

Token and Gist ID stored locally in browser only
Recommend using Fine-grained Token with limited permissions
Regularly rotate Token for better security

👨‍💻 Development Guide

Code Structure

Main JavaScript Modules:

Data Management:
- loadData() / saveData(): Data read/write
- normalizeDataStructure(): Data format validation
Bookmark Operations:
- findBookmarkLocation(): Locate bookmark
- moveBookmarkTo(): Move bookmark
- removeBookmarkById(): Delete bookmark
Drag System:
- setupBookmarkCardDrag(): Initialize drag
- dragState: Drag state management
Icon System:
- generateHighResIconMeta(): Generate icon source list
- cacheIconIfNeeded(): Cache icon
- resolveBookmarkIconSource(): Resolve icon source
Sync System:
- loadDataFromWebDAV() / saveDataToWebDAV()
- loadDataFromGist() / saveDataToGist()
Render System:
- renderApp(): Render entire app
- renderCategories(): Render category list
- renderBookmarks(): Render bookmark grid

Local Development

Clone the project

git clone https://github.com/everlst/MyLocalNewTab.git
cd MyLocalNewTab

Load extension in browser (see "Quick Start" section)
Modify code
- Edit js/script.js, css/style.css, or newtab.html
- Click refresh button on extension management page
- Open new tab to see changes
Debug
- Right-click new tab page → Inspect
- Use Chrome DevTools for debugging

❓ FAQ

1. Why do some website icons fail to load?

Reason: Some websites don't provide Favicon, or icon sources are blocked by CORS policy
Solution:
- Use "Custom Icon" feature to upload local image
- Or use "Solid Color + Text" to create simple icon

2. Why doesn't the background image display?

Reason:
- Unsupported image format
- Invalid image link
- Browser storage quota full
- Service provider restrictions
Solution:
- Ensure image format is jpg/png/webp/avif/gif
- Use image link mode (no size limit)
- Check browser storage space (edge://settings/storageAccessPermissions)
- Use self-hosted WebDAV service (verified stability)

3. What if WebDAV sync fails?

Check:
- Is file URL correct (pointing directly to JSON file)
- Are username and password correct
- Is WebDAV server accessible via network
- Does WebDAV account have read/write permissions
Debug:
- Open browser console (F12) to view error messages
- Try accessing file URL directly in browser address bar

4. Will data be lost?

Local Storage:
- Data saved in browser extension storage area
- Uninstalling extension will clear data
- Recommend regular export backups
Remote Sync:
- WebDAV/Gist keeps remote copies
- Can restore from remote anytime

5. How to migrate to another device?

Method 1: Export/Import
- Export data on old device (JSON file)
- Import data on new device
Method 2: Use sync feature
- Configure WebDAV/Gist sync on old device
- Configure same sync account on new device
- Choose "Cloud to Local"

6. Extension conflicts with other new tab extensions?

Browser only allows one extension to override new tab page
Disable other new tab extensions

7. Gist background sync is slow, what to do?

Reason:
- Gist stores images as Base64 text, large images cause:
  - ~33% size increase (Base64 encoding overhead)
  - Noticeably slower sync
  - Browser takes time to decode Base64
Solutions:
- Option 1: Choose compression when uploading (auto-prompted for files >10MB)
- Option 2: Switch to WebDAV storage (binary support, better performance, no size limit)
- Option 3: Use image hosting services (e.g., imgur.com, sm.ms) + "Image Link" mode (no size limit, fastest)
Best Practices:
- Gist is suitable for bookmark data (text), not ideal for large images
- Background image recommendation: Image hosting URL > WebDAV (unlimited) > Gist (≤10MB or compressed)

8. How to backup data?

Manual Backup:
- Open Settings → Data Transfer → Export Data
- Save JSON file to safe location
Auto Backup:
- Use WebDAV/Gist sync
- Regularly check remote data

📄 License

This project is dual-licensed:

🆓 AGPL-3.0 for open-source use (free)
💼 Commercial License for proprietary use (paid)

Open Source Use (AGPL-3.0)

Free for individuals, open-source projects, and companies willing to:

Release their modifications under AGPL-3.0
Share source code with users interacting with the software

Commercial Use

For using this software in closed-source products or services without the AGPL-3.0 requirements, please contact us for a commercial license.

Contact: everlastingk@163.com

See LICENSE for full details.

📮 Contact

GitHub: @everlst
Issues: Submit Issue

Name		Name	Last commit message	Last commit date
Latest commit History 23 Commits
css		css
icons		icons
js		js
.gitignore		.gitignore
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
manifest.json		manifest.json
newtab.html		newtab.html

Folders and files

Latest commit

History

Repository files navigation

My Local New Tab

📦 更新日志

简体中文

免责声明

📋 目录

✨ 功能特性

🎯 核心功能

💾 数据存储与同步

📤 数据导入导出

💻 用户体验

🚀 快速开始

安装步骤

📖 详细功能说明

书签管理

添加书签

编辑/删除书签

拖拽排序

文件夹功能

分类管理

添加分类

切换分类

删除分类

分类排序

搜索功能

网页搜索

书签搜索

背景设置

本地模式

云端模式

设置页面

外观设置

数据存储位置

数据转移

导入浏览器书签

关键常量配置

🔄 数据同步

WebDAV 同步详细配置

服务商举例

配置步骤

常见问题

GitHub Gist 同步详细配置

配置步骤

安全说明

👨‍💻 开发指南

代码结构

本地开发

❓ 常见问题

1. 为什么有些网站图标加载失败？

2. 背景图片为什么不显示？

3. WebDAV 同步失败怎么办？

4. 数据会丢失吗？

5. 如何迁移到其他设备？

6. 扩展与其他新标签页扩展冲突？

7. Gist 同步背景图很慢怎么办？

8. 如何备份数据？

📄 许可证

开源使用 (AGPL-3.0)

商业使用

📮 联系方式

English

Disclaimer

📋 Table of Contents

✨ Features

🎯 Core Features

💾 Data Storage & Sync

📤 Data Import/Export

🎭 User Experience

🚀 Quick Start

Installation Steps

📖 Detailed Feature Description

Bookmark Management

Add Bookmark

Edit/Delete Bookmark

Drag & Drop Sorting

Folder Features

Category Management