DIY NAS系列28 — 浏览器书签同步之 xBrowserSync
本文最后更新于 328 天前,其中的信息可能已经有所发展或是发生改变。

简介

当您在使用 Chrome 浏览器时,可能会遇到想要打开在 Firefox 浏览器中保存的书签,却发现书签不同步的情况,这就需要您手动从 Firefox 复制链接,然后在 Chrome 中打开。同样的问题也出现在使用不同电脑时,在公司电脑上保存的书签回家后在自己的电脑上却没有。为了解决这个问题,各大浏览器厂商如 Chrome 和 Firefox 都推出了用户管理中心,允许您将书签、浏览历史等数据同步到其他设备。但其中存在一个问题,就是不同浏览器之间没有办法相互同步,且数据存放在各浏览器厂商服务器当中,存在一定的数据安全隐患。本文将为您介绍一款实用的开源工具 xBrowserSync。这款软件支持 Chrome、Edge、Firefox 以及 Android 设备,能帮您备份和同步书签,使得书签管理变得无缝且高效。xBrowserSync 提供了多个免费的存储服务,所有数据都经过加密存储。如果您对公有服务器安全性不放心,还可以通过 xBrowserSync Docker 自建存储服务器,这样极大的提高了我们数据的安全性。

XBrowserSync 是一款免费且开源的浏览器书签同步工具,它具有以下特性:

  1. 数据同步:允许用户在不同设备和浏览器之间同步书签,确保您的书签始终是最新的。
  2. 数据安全:所有同步的数据都会被加密,以保护您的数据安全。
  3. 开源:xBrowserSync 是开源软件,这意味着任何人都可以查看其源代码,确保其没有隐藏的恶意代码。
  4. 自定义存储:除了使用 xBrowserSync 官方提供的免费存储服务外,用户还可以通过 xBrowserSync Docker 自建存储服务器,提供更多的存储空间。
  5. 方便易用:xBrowserSync 的用户界面设计简洁,易于使用,只需几步就可以完成书签的同步。

总的来说,xBrowserSync 是一款非常实用的书签同步工具,无论您是需要在工作和家庭设备之间同步书签,还是需要在不同浏览器之间同步,xBrowserSync 都能满足您的需求。

服务器端部署

首先需要拉取 Github 仓库的代码至本地 /SSD/Demo/xBrowserSync/ 目录。

cd /SSD/Demo/xBrowserSync/
git clone https://github.com/xbrowsersync/api-docker.git
mv api-docker/* ./
rm -rf api-docker

# 因为在下面的 docker-compose.yaml 文件中,修改了对应 services 名称为 xbs-db,所以这里将 host 修改为 xbs-db。
[root@demo xBrowserSync]# more settings.json 
{
  "db": {
    "host": "xbs-db"
  }
}

说明: 基于前期构建的 traefik 网关,详见:  DIY NAS系列12 — Traefik 出口网关配置
在 docker-compose.yaml 文件中,会对重要的配置进行说明,因个人网络环境等不同,需要根据自身实际情况调整配置。

[root@demo xBrowserSync]# cat > docker-compose.yml << \EOF
version: "3.7"

services:
  xbs-db:
    container_name: "xbs-db"
    environment:
      - "MONGO_INITDB_DATABASE=xbs"
      - "MONGO_INITDB_ROOT_USERNAME=username"
      - "MONGO_INITDB_ROOT_PASSWORD=password"
      - "XBS_DB_NAME=xbs"
      - "XBS_DB_USERNAME=username"
      - "XBS_DB_PASSWORD=password"
    image: "mongo:4.4.4"
    restart: "unless-stopped"
    volumes:
      - "/SSD/Demo/xBrowserSync/xbs-db-data:/data/db"
      - "/SSD/Demo/xBrowserSync/xbs-db-backups:/data/backups"
      - "/SSD/Demo/xBrowserSync/mongoconfig.js:/docker-entrypoint-initdb.d/mongoconfig.js"
    networks:
      - traefik_net
  xbs-api:
    container_name: "xbs-api"
    depends_on:
      - "xbs-db"
    environment:
      - "XBROWSERSYNC_DB_PWD=password" # 客户端连接服务器端密码。
      - "XBROWSERSYNC_DB_USER=username"
    healthcheck:
      test: [ "CMD", "node", "/usr/src/api/healthcheck.js" ]
      interval: "1m"
      timeout: "10s"
      retries: "5"
      start_period: "30s"
    image: "xbrowsersync/api:1.1.13"
    restart: "unless-stopped"
    volumes:
      - "/SSD/Demo/xBrowserSync/settings.json:/usr/src/api/config/settings.json"
      - "/SSD/Demo/xBrowserSync/healthcheck.js:/usr/src/api/healthcheck.js"
    networks:
      - traefik_net
    labels:
      - "traefik.enable=true"
      - "traefik.docker.network=traefik_net"
      - "traefik.http.routers.xbs-api.rule=Host(`xbs.rockylinux.cn`)"
      - "traefik.http.routers.xbs-api.entryPoints=websecure"
      - "traefik.http.routers.xbs-api.tls.certresolver=myresolver"
      - "traefik.http.routers.xbs-api.service=xbs-api"
      - "traefik.http.services.xbs-api.loadbalancer.server.port=8080" # xbs-api 接口端口为 8080

networks:
  traefik_net:
    external: true
EOF

# 启动服务 
[root@demo xBrowserSync]# docker-compose up -d

# 服务启动比较慢,确认服务启动正常
[root@demo xBrowserSync]# docker-compose ps
NAME                IMAGE                     COMMAND                  SERVICE             CREATED              STATUS                        PORTS
xbs-api             xbrowsersync/api:1.1.13   "docker-entrypoint.s…"   xbs-api             About a minute ago   Up About a minute (healthy)   8080/tcp
xbs-db              mongo:4.4.4               "docker-entrypoint.s…"   xbs-db              About a minute ago   Up About a minute             27017/tcp

服务器端启动后,通过浏览器打开 https://xbs.rockylinux.cn ,确保状态为在线。

客户端配置

各浏览器点击下面对应链接,添加扩展即可:

Edge 浏览器在扩展商店未搜索到对应扩展程序,可以去 Github 上下载对应 chrome zip 包,然后解压,根据下图操作,手动添加扩展。

客户端的配置分为两个层面,我们定义为主客户端备客户端,备客户端需要配置主客户端的 Sync ID 才能够与主客户端的数据保持一致。下面我们先说主客户端的配置。

浏览器打开扩展程序,点击【Switch Service】修改对应服务器为自建服务器。

输入自建服务器 URL 地址,点击【Update】。

这里点击【Yes】

输入在 docker-compose.yaml 中定义的 XBROWSERSYNC_DB_PWD 密码。

确认密码,点击【Sync】,现在会将本地浏览器中书签,全部同步至服务器端。

备浏览器配置,先从主浏览器点击扩展程序 — 设置,再点击对应【Sync ID】。

这时会出现二维码以及我们在下面会看到 【Copy Sync ID To Clipboard】 按钮,电脑端设置我们点击【Copy Sync ID To Clipboard】 按钮复制 Sync ID,如果是手机端 APP 设置,扫描这个二维码即可。

来到备浏览器,同样先设置同步服务器【Switch Service】,然后点击 【Already got a sync ID?】

在这是输入我们刚刚复制的 Sync ID,再输入密码,点击【Sync】。

这时候提示会删除本地书签,再同步服务器端的书签,根据实际情况,点击【Yes】,就开始同步主浏览器的书签了。

下图为两个不同浏览器之间同步的部份书签,说明同步正常。

书签同步有两种方式: 定时自动同步或点击【Update Sync】立即同步。

另外客户端还提供了备份与恢复按钮,点击【Back Up】, 会自动备份并下载对应 json 文件。

这个是用来控制是否在浏览器工具栏显示同步的书签,如果显示它将覆盖本地已经存在的书签栏。

另外这里可以看到对应存储空间大小为 500 KB,正常来说是够用的,如果您想扩大空间怎么办了?

根据官方的文档,修改对应参数 maxSyncsmaxSyncSize 即可。参考链接: GitHub – xbrowsersync/api

vi /SSD/Demo/xBrowserSync/settings.json
{
  "db": {
    "host": "xbs-db"
  },
  "maxSyncs": 0, # 不限制同步次数
  "maxSyncSize": 5120000 # 这里设置为 5 MB
}

# 重启服务
docker-compose restart xbs-api

我们再查看对应客户端,容量已经变成 5MB。

参考文献

[1] 官网
[2] GitHub
[3] Docker 镜像

后述

至此,我们对 xBrowserSync 进行了一个基本的介绍,探索了它的主要功能,如书签同步和隐私保护。虽然我们涵盖了一些关键特性,但 xBrowserSync 的潜力远不止这些。作为一个强大且用户友好的工具,它为浏览器数据同步提供了许多灵活和安全的选项。我们鼓励读者自行探索这个开源软件的更多功能,以便更全面地理解和利用它。

在下一篇博文中,我们将转向另一个引人注目的开源软件 — Flare。Flare 是一款轻量、快速、美观的个人导航页面,适用于 HomeLab 或其他注重私密的场景。

下篇预告: DIY NAS系列29 — 个人导航页之 Flare

Avatar photo

关于 木子

Founder of the Rocky Linux Chinese community, MVP、VMware vExpert、TVP, advocate for cloud native technologies, with over ten years of experience in site reliability engineering (SRE) and the DevOps field. Passionate about Cloud Computing、Microservices、CI&CD、DevOps、Kubernetes, currently dedicated to promoting and implementing Rocky Linux in Chinese-speaking regions.
用一杯咖啡支持我们,我们的每一篇[文档]都经过实际操作和精心打磨,而不是简单地从网上复制粘贴。期间投入了大量心血,只为能够真正帮助到您。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇