一键同步，无处不在的书签体验：探索多电脑Chrome书签同步插件

news2024/11/20 4:24:25

说在前面

平时大家都是怎么管理自己的浏览器书签数据的呢？有没有过公司和家里的电脑浏览器书签不同步的情况？有没有过电脑突然坏了但书签数据没有导出，导致书签数据丢失了？解决这些问题的方法有很多，我选择自己写个chrome插件来做书签同步。

实现方案

通过 gitee 来做存取

建一个私有仓库来保存自己的书签目录信息，需要同步的时候再获取 gitee 仓库的书签目录到本地。这样不用自己写服务端对数据进行存储，减少了很多不必要的开发工作。

实现步骤

一、准备工作

1、新建 gitee 仓库

直接在gitee上新建仓库即可。

我们不想要书签信息公开，所以选择勾选上私有：
image.png

创建完的初始仓库是这样的：
image.png

我们再新增一个目录，用于存放和书签相关的文件：
image.png

在该目录下新增一个文件，用于保存书签导出的数据：
image.png

二、插件编写

完成前面的准备工作，新建完 gitee 仓库之后，我们便可以正式开始进行插件的编写了。

1、插件模板
  • 安装依赖jyeontu
npm i -g jyeontu
  • 获取模板
jyeontu create

image.png

  • 生成模板

根据提示输入相关信息即可

image.png

image.png

2、giteeAPI

我们可以通过 giteeAPI 来对 gitee 仓库进行操作，下面是 giteeAPI 的操作文档：
https://gitee.com/api/v5/swagger#/getV5ReposOwnerRepoStargazers?ex=no

获取gitee指定文件的内容

我们可以通过下面代码来获取到gitee指定仓库指定文件的内容：

async function fetchFileContent(apiUrl, accessToken) {
  const response = await fetch(apiUrl, {
    headers: {
      Authorization: "token " + accessToken,
    },
  });
  const fileData = await response.json();
  return fileData.content;
}

export async function getFile(gitInfo) {
  const accessToken = gitInfo.token;
  const apiUrl =
    "https://gitee.com/api/v5/repos/" +
    gitInfo.owner +
    "/" +
    gitInfo.repo +
    "/contents/" +
    gitInfo.filePath;

  const fileContent = await fetchFileContent(apiUrl, accessToken);
  const decodedContent = atob(fileContent); // 解码Base64编码的文件内容
  const decoder = new TextDecoder();
  const decodedData = decoder.decode(
    new Uint8Array([...decodedContent].map((char) => char.charCodeAt(0)))
  );
  return JSON.parse(decodedData);
}
修改指定文件的内容数据

我们需要先获取到文件，拿到文件的sha值，后面通过sha来对文件进行编辑操作。
btoa函数只能处理Latin1字符范围内的字符串，对超出Latin1字符范围的字符串进行Base64编码，我们需要进行以下操作，使用TextEncoder对象来将字符串转换为字节数组，然后再进行Base64编码。

async function fetchFileContent(apiUrl, accessToken) {
  const response = await fetch(apiUrl, {
    headers: {
      Authorization: "token " + accessToken,
    },
  });
  const fileData = await response.json();
  return fileData.content;
}
async function getDecodedContent(content) {
  const decodedContent = atob(content); // 解码Base64编码的文件内容
  const decoder = new TextDecoder();
  const decodedData = decoder.decode(
    new Uint8Array([...decodedContent].map((char) => char.charCodeAt(0)))
  );
  return JSON.parse(decodedData);
}
async function putFileContent(apiUrl, accessToken, encodedContent, sha) {
  const commitData = {
    access_token: accessToken,
    content: encodedContent,
    message: "Modified file",
    sha: sha,
  };

  const putResponse = await fetch(apiUrl, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
      Authorization: "token " + accessToken,
    },
    body: JSON.stringify(commitData),
  });

  if (putResponse.ok) {
    console.log("File modified successfully.");
  } else {
    console.error("Failed to modify file.");
  }
}
export async function modifyFile(gitInfo, modifiedContent) {
  const accessToken = gitInfo.token;
  const apiUrl =
    "https://gitee.com/api/v5/repos/" +
    gitInfo.owner +
    "/" +
    gitInfo.repo +
    "/contents/" +
    gitInfo.filePath;

  try {
    const fileContent = await fetchFileContent(apiUrl, accessToken);
    const content = await getDecodedContent(fileContent);
    modifiedContent = mergeBookmarks(content, modifiedContent);
    modifiedContent = JSON.stringify(modifiedContent);
    const encoder = new TextEncoder();
    const data = encoder.encode(modifiedContent);
    const encodedContent = btoa(
      String.fromCharCode.apply(null, new Uint8Array(data))
    );

    await putFileContent(apiUrl, accessToken, encodedContent, fileContent.sha);
  } catch (error) {
    console.error("An error occurred:", error);
  }
}
3、indexDb存取

我们不希望每次打开都需要去重新填写gitee仓库的相关信息，所以这里我们使用indexDb来对gitee仓库的相关信息做一个保存。

export class IndexedDB {
  constructor(databaseName, storeName) {
    this.databaseName = databaseName;
    this.storeName = storeName;
    this.db = null;
  }

  open() {
    return new Promise((resolve, reject) => {
      const request = window.indexedDB.open(this.databaseName);

      request.onerror = () => {
        reject(new Error("Failed to open database"));
      };

      request.onsuccess = () => {
        this.db = request.result;
        resolve();
      };

      request.onupgradeneeded = (event) => {
        this.db = event.target.result;
        if (!this.db.objectStoreNames.contains(this.storeName)) {
          this.db.createObjectStore(this.storeName, {
            keyPath: "id",
            autoIncrement: true,
          });
        }
      };
    });
  }

  createDatabase() {
    return new Promise((resolve, reject) => {
      const request = window.indexedDB.open(this.databaseName);

      request.onerror = () => {
        reject(new Error("Failed to create database"));
      };

      request.onsuccess = () => {
        this.db = request.result;
        this.db.close();
        resolve();
      };

      request.onupgradeneeded = (event) => {
        this.db = event.target.result;
        if (!this.db.objectStoreNames.contains(this.storeName)) {
          this.db.createObjectStore(this.storeName, {
            keyPath: "id",
            autoIncrement: true,
          });
        }
        this.db.close();
        resolve();
      };
    });
  }

  close() {
    if (this.db) {
      this.db.close();
      this.db = null;
    }
  }

  add(data) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, "readwrite");
      const objectStore = transaction.objectStore(this.storeName);
      const request = objectStore.add(data);

      request.onsuccess = () => {
        resolve(request.result);
      };

      request.onerror = () => {
        reject(new Error("Failed to add data"));
      };
    });
  }

  getAll() {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, "readonly");
      const objectStore = transaction.objectStore(this.storeName);
      const request = objectStore.getAll();

      request.onsuccess = () => {
        resolve(request.result);
      };

      request.onerror = () => {
        reject(new Error("Failed to get data"));
      };
    });
  }

  getById(id) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, "readonly");
      const objectStore = transaction.objectStore(this.storeName);
      const request = objectStore.get(id);

      request.onsuccess = () => {
        resolve(request.result);
      };

      request.onerror = () => {
        reject(new Error("Failed to get data"));
      };
    });
  }

  delete(id) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, "readwrite");
      const objectStore = transaction.objectStore(this.storeName);
      const request = objectStore.delete(id);

      request.onsuccess = () => {
        resolve();
      };

      request.onerror = () => {
        reject(new Error("Failed to delete data"));
      };
    });
  }

  update(id, newData) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, "readwrite");
      const objectStore = transaction.objectStore(this.storeName);
      const getRequest = objectStore.get(id);

      getRequest.onsuccess = () => {
        const oldData = getRequest.result;

        if (!oldData) {
          const addRequest = objectStore.add({ ...newData, id });

          addRequest.onsuccess = () => {
            resolve({ ...newData, id });
          };

          addRequest.onerror = () => {
            reject(new Error("Failed to add data"));
          };
        } else {
          const mergedData = { ...oldData, ...newData };
          const putRequest = objectStore.put(mergedData);

          putRequest.onsuccess = () => {
            resolve(mergedData);
          };

          putRequest.onerror = () => {
            reject(new Error("Failed to update data"));
          };
        }
      };
      getRequest.onerror = () => {
        reject(new Error("Failed to get data"));
      };
    });
  }
}
4、书签存取
获取chrome书签

要获取 Chrome 浏览器的书签目录，我们可以使用 Chrome 浏览器提供的 API——chrome.bookmarks。下面是一个示例代码，演示如何使用chrome.bookmarks API 获取 Chrome 浏览器的书签目录：

export const getBookmarks = () => {
  return new Promise((resolve) => {
    chrome.bookmarks.getTree(function (bookmarkTreeNodes) {
      resolve(bookmarkTreeNodes);
    });
  });
};

在上述代码中，我们首先使用chrome.bookmarks.getTree()方法获取 Chrome 浏览器的书签目录树。

请注意，要使用chrome.bookmarks API，你需要在你的 Chrome 插件中声明"bookmarks"权限。具体来说，在插件清单文件（manifest.json）中添加以下内容：

{
  "manifest_version": 2,
  "name": "你的插件名称",
  "version": "1.0",
  "permissions": [
    "bookmarks"
  ],
  "background": {
    "scripts": [
      "bg.js"
    ]
  }
}

在上述代码中，我们在"permissions"字段中声明了"bookmarks"权限，以便我们可以使用chrome.bookmarks API。同时，在"background"字段中指定了一个后台脚本（bg.js），以便我们在后台执行上述代码。

删除chrome浏览器书签

导入书签前我们需要先清除一下当前浏览器的书签，通过chrome.bookmarks.removeTree可以删除书签节点。

export function removeBookmarks(bookmarkTreeNodes) {
  // 遍历书签树，删除所有的书签
  function traverseBookmarks(bookmarkNodes) {
    for (const node of bookmarkNodes) {
      if (node.children) {
        traverseBookmarks(node.children);
      }
      // 删除书签节点
      chrome.bookmarks.removeTree(node.id);
    }
  }
  traverseBookmarks(bookmarkTreeNodes);
}
导入书签

使用chrome.bookmarks.create来新建书签。

export function importBookmarks(bookmarkTreeNodes) {
  // 遍历书签树
  function traverseBookmarks(bookmarkNodes, parentId) {
    for (const node of bookmarkNodes) {
      // 如果节点是文件夹
      if (node.children) {
        // 创建一个新的文件夹节点
        chrome.bookmarks.create(
          {
            parentId: parentId,
            title: node.title,
          },
          function (newFolderNode) {
            // 递归遍历子节点
            traverseBookmarks(node.children, newFolderNode.id);
          }
        );
      }
      // 如果节点是书签
      else {
        // 创建一个新的书签节点
        chrome.bookmarks.create({
          parentId: parentId,
          title: node.title,
          url: node.url,
        });
      }
    }
  }

  // 从根节点开始遍历书签树
  traverseBookmarks(bookmarkTreeNodes[0].children, "1");
}

插件使用

1、插件下载

直接到gitee上下载源码即可：

源码地址：https://gitee.com/zheng_yongtao/chrome-plug-in.git

2、导入插件

书签同步插件的目录如下：
image.png

下载完后打开浏览器扩展程序管理页面（chrome://extensions/），选择加载已解压的扩展程序：

image.png

选择插件目录导入即可：

image.png

导入成功后就可以看到下面这个插件了
image.png

可以勾选上下面这个，勾选后插件就会显示在导航栏上
image.png

3、补充gitee仓库信息数据

导入插件后，我们点击导航栏的插件图标，可以看到这样一个面板，其中有四个数据需要我们填写：
image.png

获取 token

进入到giteeAPI文档进行授权获取到返回填写即可，具体步骤如下：
image.png

image.png

image.png

image.png

仓库所属空间地址(owner)

就是个人主页的一个空间地址，如下图：
image.png

仓库路径(repo)

前面新建仓库的路径（仓库名），如下图：
image.png

书签文件路径(filePath)

新建用于保存书签数据的文件，想保存多份不同的数据的话可以多件几个不同的文件分别进行存储，同步的时候选择对应的目录即可，如下图：
image.png

将对应信息填写上之后我们就可以开始进行同步操作了：
image.png

4、同步方式

（1）覆盖保存

使用当前浏览器书签数据覆盖保存到gitee仓库中。

（2）合并保存

将当前浏览器书签数据与gitee仓库中的书签数据合并好再进行保存。

（3）覆盖获取

使用gitee仓库中的书签数据覆盖掉本地的书签数据。

（4）合并获取

将gitee仓库中的书签数据和本地的书签数据合并后再覆盖掉本地的书签数据。

（5）合并规则

同一层级并且同名的目录我们会将其子节点合并到同一目录下，同一层级下我们会根据 书签名 + 书签url 对该层级的书签进行去重。

源码

1、gitee

gitee 地址：https://gitee.com/zheng_yongtao/chrome-plug-in/tree/master/chrome-bookmarks-manage

2、公众号

关注公众号『前端也能这么有趣』发送 chrome插件即可获取源码。

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1137923.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据结构与算法基础（青岛大学-王卓）(9)

数据结构与算法基础（青岛大学-王卓）(9)

终于迎来了最后一部分(排序)了，整个王卓老师的数据结构就算是一刷完成了，但是也才是数据结构的开始而已，以后继续与诸位共勉 😃 (PS.记得继续守护家人们的健康当然还有你自己的)。用三根美味的烤香肠开始吧。。。 文章目录 排序基…
阅读更多...
高级深入--day41

高级深入--day41

用Pymongo保存数据 爬取豆瓣电影top250movie.douban.com/top250的电影数据，并保存在MongoDB中。 items.py class DoubanspiderItem(scrapy.Item):# 电影标题title scrapy.Field()# 电影评分score scrapy.Field()# 电影信息content scrapy.Field()# 简介info …
阅读更多...
基于SSM的OA办公系统

基于SSM的OA办公系统

末尾获取源码 开发语言：Java Java开发工具：JDK1.8 后端框架：SSM 前端：Vue 数据库：MySQL5.7和Navicat管理工具结合 服务器：Tomcat8.5 开发软件：IDEA / Eclipse 是否Maven项目：是 目录…
阅读更多...
nginx浏览器缓存和上流缓存expires指令_nginx配置HTTPS

nginx浏览器缓存和上流缓存expires指令_nginx配置HTTPS

1.nginx控制浏览器缓存是针对于静态资源[js，css，图片等] 1.1 expires指令 location /static {alias/home/imooc;#设置浏览器缓存10s过期expires 10s;#设置浏览器缓存时间晚上22:30分过期expires @22h30m;#设置浏览器缓存1小时候过期expires -1h;#设置浏览器不缓存expires …
阅读更多...
【JavaEE初阶】 线程安全的集合类

【JavaEE初阶】 线程安全的集合类

文章目录 🍀前言🌲多线程环境使用 ArrayList🚩自己使用同步机制 (synchronized 或者 ReentrantLock)🚩Collections.synchronizedList(new ArrayList);🚩使用 CopyOnWriteArrayList 🎍多线程环境使用队列&am…
阅读更多...
通过jdk自制https证书并配置到nginx并配置http2

通过jdk自制https证书并配置到nginx并配置http2

生成证书 这里使用自己生成的免费证书。在${JAVA_HOME}/bin 下可以看到keytool.exe,在改目录打开cmd然后输入： keytool -genkey -v -alias lgq.com -keyalg RSA -keystore d:/zj/ssl/fastfly.com.keystore -validity 3650生成证书过程中：【你的名字】对…
阅读更多...
美国海运专线冬季通航情况

美国海运专线冬季通航情况

随着全球经济一体化的推进，海运业务的重要性日益凸显。特别是在美国，作为世界上最大的经济体之一，其海运业务的发展对全球物流供应链有着重要影响。而在冬季，美国海运专线又会面临怎样的通航情况呢?下面就让我们一起来探讨一下。…
阅读更多...
区块链技术与应用 【全国职业院校技能大赛国赛题目解析】第二套区块链系统部署与运维

区块链技术与应用 【全国职业院校技能大赛国赛题目解析】第二套区块链系统部署与运维

第二套区块链系统部署与运维题目 环境 ： ubuntu20 fisco : 2.8.0 docker: 20.10.21 webase-deploy : 1.5.5 mysql: 8.0.34 子任务1-2-1： 搭建区块链系统并验证（4分） 使用build_chain.sh 脚本文件进行搭建区块链 ，要求: 四节点，默认配置，单机，docker root@192-168-19…
阅读更多...
【推荐】如何使用drawio的编辑器，看本文就够

【推荐】如何使用drawio的编辑器，看本文就够

学会使用drawio的编辑器 drawio是免费的开源的图表应用，你可以通过app.diagrams.net使用在线版本或者下载离线安装版在桌面端使用。 对于团队来讲， 把数据存储作为安全第一的图表应用， 你可以选择存储数据到不同的介质。例如Atlassian Conf…
阅读更多...
deepxde更改backend

deepxde更改backend

deepxde更改backend 1. 问题描述2. 解决方案 1. 问题描述 如果在使用deepxde库时，想使用除tensorflow.compat.v1之外的后端依赖，例如pytorch，会出现如下情况： 这时提示目前的后端依赖是tensorflow.compat.v1，需要更改…
阅读更多...
RHCE---正则表达式

RHCE---正则表达式

文章目录 前言一、pandas是什么？二、使用步骤 1.引入库2.读入数据总结 前言 一. 文本搜索工具 grep是linux中一种强大的文件搜索过滤工具，可以按照正 则表达式检索文件内容，并把匹配的结果显示到屏幕上 （匹配的内容会标红&#x…
阅读更多...
[Python]Selenium-自动化测试

[Python]Selenium-自动化测试

Selenium是一个web自动化测试的工具,在使用之前先在对应的项目添加工具包噢. 本文章主要简单的介绍了selenium对于自动化测试的使用 目录 添加浏览器驱动 get函数来到对应网站 驱动的定位 元素定位 id定位 class name定位 CSS定位 XPath定位 link text定位 定位一…
阅读更多...
【如何去掉Unity点击运行时，Photon的警告弹窗】

【如何去掉Unity点击运行时，Photon的警告弹窗】

如何去掉Unity点击运行时，Photon的警告弹窗 一、前言二、解决办法1、解决思路2、解决步骤 一、前言 我导入了Photon插件，但是我现在用不着，又不想将其删掉，Photon的配置也没有弄，导致现在一运行Unity，就会…
阅读更多...
python re 使用非捕获组来忽略第一个value的匹配结果

python re 使用非捕获组来忽略第一个value的匹配结果

import retext " value1,value2,value3 "pattern r"(?:value\d,){2}value(\d)"match re.search(pattern, text) print(match.group(1)) 其中，(?:...)表示非捕获组，{1}表示匹配前面的模式一次。该正则表达式的含义是&#xff1a…
阅读更多...
力扣刷题 day56：10-26

力扣刷题 day56：10-26

1.解码异或后的数组 未知 整数数组 arr 由 n 个非负整数组成。 经编码后变为长度为 n - 1 的另一个整数数组 encoded ，其中 encoded[i] arr[i] XOR arr[i 1] 。例如，arr [1,0,2,1] 经编码后得到 encoded [1,2,3] 。 给你编码后的数组 encoded 和原…
阅读更多...
Hbase基本使用，读写原理，性能优化学习

Hbase基本使用，读写原理，性能优化学习

文章目录 HBase简介HBase定义HBase数据模型**HBase** **逻辑结构****HBase** **物理存储结构****HBase** **基本架构** HBase 入门**HBase** **安装部署****HBase** 配置文件**HBase** 启动停止**HBase** **访问页面****HBase** **高可用****HBase Shell****HBase API**HBaseCo…
阅读更多...
解决msvcp120.dll丢失的问题的5个方法，修复系统dll问题

解决msvcp120.dll丢失的问题的5个方法，修复系统dll问题

在使用计算机的过程中，我们经常会遇到各种各样的动态链接库（DLL）文件。其中之一就是“msvcp120.dll丢失”。这个错误通常会导致某些应用程序无法正常运行。为了解决这个问题，我们需要找到合适的方法来修复丢失的msvcp120.dll文件。…
阅读更多...
用Wireshark在本机环回接口上抓包

用Wireshark在本机环回接口上抓包

Wireshark版本下载、安装 访问官网：https://www.wireshark.org/ 可以下载最新的版本，例如4.0.10版本。包比较大，可能下载得比较慢。 下载到本地后，双击按照提示安装就行了。 在环回接口上抓包 启动Wireshark，双击在…
阅读更多...
【网络】想学TCP，这一篇就够了 —— TCP理论知识详解（基于前面手搓TCP服务端博客的补充）

【网络】想学TCP，这一篇就够了 —— TCP理论知识详解（基于前面手搓TCP服务端博客的补充）

TCP理论 前言正式开始TCP报文如何进行分离和封装TCP如何将有效载荷交付给上层如何理解TCP的可靠性TCP报头中的序号和确认序号（简单过一下，后面还会详细讲）只要序号不要确认序号行不行乱序问题 16位窗口大小TCP的全双工通信方式16位窗口大小的…
阅读更多...
java小程序商城免费搭建 VR全景商城 saas商城 b2b2c商城 o2o商城 积分商城 秒杀商城 拼团商城 分销商城 短视频商城

java小程序商城免费搭建 VR全景商城 saas商城 b2b2c商城 o2o商城 积分商城 秒杀商城 拼团商城 分销商城 短视频商城

涉及平台 平台管理、商家端（PC端、手机端）、买家平台（H5/公众号、小程序、APP端（IOS/Android）、微服务平台（业务服务） 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023