HALUNHAKU island field notes
← 返回归档

项目

MarkTab - 我开发的浏览器书签管理扩展

· 8 分钟 · 项目
#Chrome#Edge#书签管理#开源项目#浏览器扩展
MarkTab - 我开发的浏览器书签管理扩展

为什么我做了 MarkTab：一个更安静的书签新标签页

我一直有一个很朴素的需求：打开浏览器新标签页时，能快速找到自己真正要去的网站。

但浏览器默认的书签体验，对重度书签用户并不算友好。书签栏会越来越长，文件夹会越来越深，很多收藏过的网页最后变成了「我知道它在某个地方，但就是懒得找」。

所以我做了 MarkTab。

它不是一个内容推荐页，也不是一个花哨的效率中台。MarkTab 只做一件事：把你浏览器里已经存在的书签，变成一个更清晰、更快、更安静的新标签页工作台。

项目开源在 GitHub：halunhaku/marktab

MarkTab 是什么

MarkTab 是一个 Chrome / Edge Manifest V3 浏览器扩展。安装后，它会替代默认的新标签页，把你的本地浏览器书签整理成一个可以搜索、浏览、置顶和快速访问的书签首页。

它的核心特点很简单：

  • 不需要注册账号
  • 不需要同步到第三方服务
  • 不上传书签标题、URL、文件夹名或设置数据
  • 不引入远程脚本
  • 不依赖前端框架
  • 直接使用你现有的浏览器书签结构

换句话说，它不是让你重新管理一套数据，而是把你已经积累的书签重新变得可用。

我为什么需要它

我自己的书签长期处在一种「收藏很多，真正能用的不多」的状态。

有些网站每天都要打开，但它们混在书签栏里；有些资料按文件夹整理过，但入口太深；还有一些临时访问过的网站，过几天想再找就要翻历史记录。

MarkTab 解决的不是「如何收藏更多」，而是「如何让已经收藏的东西重新浮到眼前」。

所以新版 MarkTab 的首页被拆成了三个层次：

  1. Pinned：最常用的书签，放在最显眼的位置
  2. Recent：最近通过 MarkTab 打开过的书签，方便回到刚用过的内容
  3. Folders：保留原本的书签文件夹结构，按分类浏览

这三个入口对应三种真实场景：我知道我要去哪、我想回到刚才的东西、我想按分类慢慢找。

核心功能

Spotlight 式搜索

MarkTab 的搜索是整个产品的主入口。

点击首页搜索框，或者按 Ctrl/Cmd + K，就可以打开一个 Spotlight 风格的搜索面板。输入关键词后，结果会按三类展示：

  • 书签
  • 文件夹
  • 网页搜索

你可以用方向键选择结果，按 Enter 打开；如果没有找到本地书签，也可以直接把当前输入提交给浏览器默认搜索引擎。

这里有一个重要变化：新版 MarkTab 不再维护自己的搜索引擎前缀列表，而是通过 Chrome Search API 调用浏览器默认搜索引擎。这样逻辑更简单，也更符合用户自己的浏览器设置。

Pinned 置顶书签

有些书签就是高频入口，比如后台、文档、工作台、常用工具。

在 MarkTab 里，你可以把任意书签置顶。置顶后，它会出现在首页的 Pinned 区域，不需要每次进入文件夹里翻找。

置顶数据保存在浏览器本地存储里，不会上传到任何开发者服务。

Recent 最近访问

MarkTab 会记录你通过它打开过的书签，并在首页展示最近访问项。

这个功能解决的是另一个常见问题：你不一定要重新搜索，有时只是想回到刚才打开过的页面。

Recent 只记录 MarkTab 内部的访问入口，用于本地体验，不读取或上传完整浏览器历史记录。

Folders 文件夹视图

MarkTab 仍然尊重你原来的书签组织方式。

如果你已经用文件夹整理过书签，MarkTab 会直接读取浏览器书签树，把文件夹显示在首页和侧边栏里。进入某个文件夹后，可以看到该文件夹下的书签卡片，也可以在当前文件夹内继续搜索过滤。

这点对我很重要：MarkTab 不应该强迫用户迁移到一套新的分类系统。你的书签结构，本来就应该成为界面的一部分。

弹出窗口

除了新标签页，MarkTab 也提供了一个扩展弹出窗口，用来做几件轻量操作：

  • 查看书签和文件夹数量
  • 打开新标签页
  • 添加当前页面为书签
  • 进入浏览器书签管理器

其中「添加当前页面」只会在用户主动点击按钮时读取当前标签页标题和 URL，这也是 activeTab 权限存在的原因。

主题和强调色

新版 MarkTab 的主题系统更克制：

  • Light
  • Dark
  • System

同时提供几种强调色，用来改变界面里的重点色。整体视觉方向不是追求强烈装饰，而是尽量让新标签页保持安静、清晰、长期可用。

技术实现

MarkTab 仍然是一个无框架的浏览器扩展。

当前技术栈主要是：

  • Manifest V3
  • 原生 JavaScript
  • 原生 CSS
  • Chrome Extension API
  • bookmarks
  • favicon
  • search
  • storage
  • activeTab

我没有使用 React、Vue 或其他前端框架。原因很简单：MarkTab 是一个新标签页扩展，不是一个复杂 Web 应用。它应该启动快、代码少、行为可审查，尤其要适合 Chrome Web Store 的审核和长期维护。

发布包里只包含运行扩展需要的文件：manifest、HTML、CSS、JS 和图标。

隐私说明

MarkTab 的隐私边界非常明确：

  • 不收集用户数据
  • 不上传书签标题
  • 不上传书签 URL
  • 不上传文件夹名称
  • 不上传设置数据
  • 不加载远程可执行代码
  • favicon 使用 Chrome 内置 favicon 服务
  • 网页搜索只在用户主动提交时交给浏览器默认搜索引擎

也就是说，MarkTab 处理书签数据，是为了在本地新标签页里展示和搜索书签，不是为了建立一个云端书签服务。

你的书签，仍然只属于你的浏览器。

安装方式

方式一：从 GitHub Releases 安装

  1. 打开 MarkTab Releases
  2. 下载最新版本的 marktab-x.x.x.zip
  3. 解压到本地文件夹
  4. 打开 Chrome 或 Edge 的扩展管理页面
  5. 开启「开发者模式」
  6. 点击「加载已解压的扩展程序」
  7. 选择解压后的 MarkTab 文件夹

方式二：从源码安装

git clone https://github.com/halunhaku/marktab.git
cd marktab

然后在 chrome://extensions 或 edge://extensions 里加载这个项目文件夹。

使用截图

新标签页界面

新标签界面

新标签页界面 - 时钟、搜索栏、文件夹分类和置顶书签一目了然

搜索功能

搜索界面

搜索界面 - 支持按标题和 URL 实时搜索书签，也可以通过浏览器默认搜索引擎进行网页搜索

文件夹视图

文件夹视图

文件夹视图 - 按原有书签文件夹浏览、搜索和置顶常用书签

后续计划

MarkTab 目前已经能满足我自己的日常使用，但后面还会继续打磨几个方向：

  • 优化大量书签和深层文件夹下的浏览体验
  • 补齐更多键盘操作细节
  • 继续改进主题、暗色模式和强调色
  • 完善 Chrome Web Store / Edge Add-ons 发布材料
  • 让发布包和隐私说明保持一致、可审查

写在最后

MarkTab 对我来说不是一个宏大的产品，而是一个很具体的小工具。

它解决的是每天都会遇到的小摩擦：新标签页打开后，我到底要去哪里？那个收藏过的网站在哪里？我能不能少点几次，少翻几层文件夹？

如果你也有很多书签，也不太满意默认的新标签页体验，可以试试 MarkTab。

项目地址：github.com/halunhaku/marktab

本文同步发布于 MarkTab GitHub 仓库 和 halunhaku's blog

Comments

留言瓶

评论会公开显示。