闲来无事，我开发了一个谷歌浏览器书签插件~~

应用商店地址欢迎大家下载使用 😁
本文仅在掘金发布

之前一直有朋友抱怨说浏览器的书签比较难管理，想要管理需要跳转到书签管理页面才行，也不想在浏览器工具栏多一行书签栏，感觉有点挤压页面大小。

最近在查看 chrome 开发者文档的时候，发现 API 的支持完全满足现在想要的需求，同时也有不少人也在做类似的二次开发，于是心血来潮就有了这个小工具~~

才艺展示

注册 Chrome Web Store 开发者账号

首先得注册开发者账号，进入登录后就会看到要注册：

需要花费 5 美元注册，而且还必须是银行卡，我用的是中国银行的莫奈卡，往里边提前存点美元就可以了：

填收费地址的时候，现在是可以填国内地址了！

技术架构

本项目采用的是 antd + crxjs，它支持 vite + react/vue。

提一嘴，crxjs 这个工具，在打包的时候，可以自动识别 manifest 文件、service-worker 文件等，并将其放在打包的根目录上，打包结果可以直接上传，非常的方便。

各个功能点的技术实现

1. 支持树状列表展示

前期使用 antd 的 menu，但是发现目录树递归层级较深以后，性能会出现问题，后来改用 table 组件来展示递归树。

关于操作项的性能优化，原先使用 display: none，在鼠标 hover 的时候再 display: inline-block，后来在测试的过程中，发现滚动过程中鼠标会反复 hover 在行列上，导致触发 hover 效果，进而不停地回流，此时滚动就会出现卡顿，后来进行了优化，使用 react 的 state 来保证同一时刻只有一个操作组件渲染在界面上：

js 复制代码

<Flex justify="flex-end" style={{ flex: 1 }}>
  {currentShowActionRowId === id ? (
    <ColumnAction
      isDir={isDir}
      isTop={isTop}
      record={record}
      title={title}
      tags={tags}
      onOpenChange={onOpenChange}
      callback={callback}
    />
  ) : null}
</Flex>

这样，在鼠标移到某一行的时候，设置 currentShowActionRowId 就可以动态显示操作列：

js 复制代码

onRow={(record) => {
    return {
      onMouseEnter: (event) => {
        event.stopPropagation();
        if (!isWipOpening.current) {
          flushSync(() => {
            setCurrentShowActionRowId(record.id);
          });
        }
      },
    };
 }}

2. 自由打标签

顾名思义，我们默认支持几种颜色的标签，用户可以自定义颜色的新的标签：

然后支持通过标签颜色来筛选：

3. 支持增删改

添加当前页面到书签的功能竟然需要获取用户浏览记录权限，我只好放弃😂

4. 支持搜索记录

我们使用谷歌存储来放置记录信息：

js 复制代码

chrome.storage.local.set({ 'bookmarker-search-history': { ...history } }, function () {
    callback && callback();
});

界面效果(目前支持最近20条)：

5. 支持动态主题切换

没啥好讲的，做了个主题切换：

主题的初始化是根据用户浏览器主题来的：

js 复制代码

useEffect(() => {
  setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? THEME.DARK : THEME.LIGHT);
}, []);

6. 支持国际化

判断用户浏览器环境语言来初始化：

js 复制代码

const userLanguage = navigator.language || navigator.userLanguage;
const locale = userLanguage === 'zh-CN' ? zhCN : enUS;

<ConfigProvider
    locale={locale}
    ...
>
</ConfigProvider>

自定义文字的国际化，我是自己维护了一个json:

js 复制代码

const locale = {
  'yes-en': 'Yes',
  'yes-zh-cn': '决定了',
  'no-en': 'No',
  'no-zh-cn': '取消',
  'empty-en': 'Empty',
  'empty-zh-cn': '空空如也',
}

然后使用转换函数来实现的：

js 复制代码

export default function formatMessage(configContext, message) {
  const antdLocale = configContext?.locale?.locale || 'en';

  return locale[`${message}-${antdLocale}`] || '';
}

7. 支持右键菜单和快捷键

本插件开启了任意浏览器页面的邮件菜单：

以及快捷键打开：⌘+B 或 Ctrl+B

后期打算

应用商店搜索优化，目前搜索排名不是特别靠前
新功能支持：导入导出、筛选无效网址、网页快照等
迁移到 Edge 浏览器

附

谷歌应用商店地址