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

说在前面

平时大家都是怎么管理自己的浏览器书签数据的呢？有没有过公司和家里的电脑浏览器书签不同步的情况？有没有过电脑突然坏了但书签数据没有导出，导致书签数据丢失了？解决这些问题的方法有很多，我选择自己写个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.rhkb.cn/news/171066.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Java 进阶篇】Java Request 继承体系详解

【Java 进阶篇】Java Request 继承体系详解

在Java编程中，Request（请求）是一个常见的概念，特别是在Web开发中。Request通常用于获取来自客户端的信息，以便服务器能够根据客户端的需求提供相应的响应。在Java中，Request通常涉及到一系列类和接口&#…
阅读更多...
简化路径（C++解法）

简化路径（C++解法）

题目 给你一个字符串 path ，表示指向某一文件或目录的 Unix 风格 绝对路径 （以 / 开头），请你将其转化为更加简洁的规范路径。 在 Unix 风格的文件系统中，一个点（.）表示当前目录本身&#xff1…
阅读更多...
存储器概述

存储器概述

一、存储系统基本概念
阅读更多...
3DMAX金属屋顶墙面铺设插件使用方法

3DMAX金属屋顶墙面铺设插件使用方法

3DMAX金属屋顶墙面铺设插件教程 3DMAX金属屋顶墙面铺设插件，一键生成金属板屋顶、金属外墙面板，是一款非常实用的建筑建模插件。 【适用版本】 3dMax7或更新版本 【使用方法】 1.启动3dMax软件，打开（或创建）场景文件…
阅读更多...
递归神经网络 (RNN)

递归神经网络 (RNN)

弗朗西斯科佛朗哥 一、说明 循环神经网络非常有趣，因为与前馈网络不同，在前馈网络中，数据只能在一个方向上传播，每个神经元可以与连续层的一个或多个神经元连接，在这种类型的网络中，神经元还可以环回自身或…
阅读更多...
工作小计-GPU硬编以及依赖库 nvcuvidnvidia-encode

工作小计-GPU硬编以及依赖库 nvcuvidnvidia-encode

工作小计-GPU编码以及依赖库 已经是第三篇关于编解码的记录了。项目中用到GPU编码很久了，因为yuv太大，所以编码显得很重要。这次遇到的问题是环境的搭建问题。需要把开发机上的环境放到docker中，以保证docker中同样可以进行GPU的编码。 1 定…
阅读更多...
世微 宽电压降压 DC-DC 电源管理芯片 以太网平衡车工业控制电源驱动12V6A AP8854

世微 宽电压降压 DC-DC 电源管理芯片 以太网平衡车工业控制电源驱动12V6A AP8854

1，产品描述 AP8854 一款宽电压范围降压型 DC-D 电源管理芯片，内部集成使能开关控制、基 准电源、误差放大器、过热保护、限流保 护、短路保护等功能，非常适合宽电压输 入降压使用。 AP8854 带使能控制，可以大大节省外 围器件&…
阅读更多...
《持续交付：发布可靠软件的系统方法》- 读书笔记（八）

《持续交付：发布可靠软件的系统方法》- 读书笔记（八）

持续交付：发布可靠软件的系统方法（八） 第 8 章 自动化验收测试8.1 引言8.2 为什么验收测试是至关重要的8.2.1 如何创建可维护的验收测试套件8.2.2 GUI 上的测试 8.3 创建验收测试8.3.1 分析人员和测试人员的角色8.3.2 迭代开发项目中的分析工…
阅读更多...
你真的了解CPU和GPU？

你真的了解CPU和GPU？

目录 先举个栗子 CPU 什么是CPU CPU的定义 CPU的组成 CPU的功能 GPU 什么是GPU GPU的定义 GPU的组成 GPU的功能 CPU和GPU的区别 先举个栗子 假设你正在编辑一份文档，这时可以将CPU和GPU的角色比喻为文档编辑过程中的两个不同任务。 1. CPU CPU就好比是…
阅读更多...
YOLOv5配置文件之 - yaml

YOLOv5配置文件之 - yaml

在YOLOv5的目录中，models文件夹里存储了YOLO的模型配置。 ./models/yolov5.yaml 定义了YOLOv5s网络结构的定义文件 yaml的主要内容 参数配置 nc: 80 类别数量 depth_multiple: 0.33 模型深度缩放因子 width_multiple: 0.50 控制卷积特征图的通道个数 anchors配…
阅读更多...
tinymce输入框怎么限制只输入空格或者回车时不能提交

tinymce输入框怎么限制只输入空格或者回车时不能提交

项目场景： 项目相关背景： tinymce输入框只输入空格或者回车时提交的空数据毫无意义，所以需要限制一下 无意义的输入： 解决方案： 因为tinymce输入框传到后端的数据是代码形式，所以不能直接.trem&#…
阅读更多...
uniapp开发小程序—picker结合后台数据实现二级联动的选择

uniapp开发小程序—picker结合后台数据实现二级联动的选择

一、效果图 二、完整代码 <template><view><picker mode"multiSelector" change"bindMultiPickerChange" columnchange"bindMultiPickerColumnChange":value"multiIndex" :range"multiArray"><view c…
阅读更多...
硬件安全与机器学习的结合

硬件安全与机器学习的结合

文章目录 1. A HT Detection and Diagnosis Method for Gate-level Netlists based on Machine Learning摘要Introduction 2. 基于多维结构特征的硬件木马检测技术摘要Instruction 3. A Hardware Trojan Detection and Diagnosis Method for Gate-Level Netlists Based on Diff…
阅读更多...
一文了解GC垃圾回收

一文了解GC垃圾回收

一文了解GC垃圾回收 1 判断一个对象为垃圾对象的方法 引用计数法(弃用) 可达性分析算法 是否有指向GC root 的引用链&#xff0c;如果有&#xff0c;不是垃圾对象 ---->GC roo:即rt.jar包中内容 2 内存泄漏与内存溢出区别 泄漏&#xff1a;原本需要被回收的对象&#…
阅读更多...
前端koa搭建服务器(保姆级教程)——part1

前端koa搭建服务器(保姆级教程)——part1

目录 koa简介前端项目搭建koa环境第一步&#xff1a;新建项目第二步&#xff1a;环境初始化&#xff0c;安装依赖初始化项目&#xff0c;生成package.json文件安装koa依赖安装koa-router 路由管理依赖安装dotenv 环境变量依赖安装nodemon 热启动依赖 第三步&#xff1a;代码调用…
阅读更多...
2016年亚太杯APMCM数学建模大赛C题影视评价与定制求解全过程文档及程序

2016年亚太杯APMCM数学建模大赛C题影视评价与定制求解全过程文档及程序

2016年亚太杯APMCM数学建模大赛 C题 影视评价与定制 原题再现 中华人民共和国成立以来&#xff0c;特别是政治改革和经济开放后&#xff0c;随着国家经济的增长、科技的发展和人民生活水平的提高&#xff0c;中国广播电视媒体取得了显著的成就&#xff0c;并得到了迅速的发展…
阅读更多...
JVM虚拟机：对象在内存中的存储布局

JVM虚拟机：对象在内存中的存储布局

本文重点 在前面的过程中，我们学习了对象创建过程，那么一个对象在内存中的布局是什么样的呢？ 对象在内存中的存储布局 普通对象 当我们创建一个对象的时候，它由三部分组成，分别为对象头（MarkWord+class指针（指向class对象）），实例数据（对象的成员变量），填充。如果…
阅读更多...
特殊类设计[下] --- 单例模式

特殊类设计[下] --- 单例模式

文章目录 5.只能创建一个对象的类5.1设计模式[2.5 万字详解&#xff1a;23 种设计模式](https://zhuanlan.zhihu.com/p/433152245)5.2单例模式1.饿汉模式1.懒汉模式 6.饿汉模式7.懒汉模式7.1饿汉模式优缺点:7.2懒汉模式1.线程安全问题2.单例对象的析构问题 8.整体代码9.C11后可…
阅读更多...
react-组件间的通讯

react-组件间的通讯

一、父传子 父组件在使用子组件时&#xff0c;提供要传递的数据子组件通过props接收数据 class Parent extends React.Component {render() {return (<div><div>我是父组件</div><Child name"张" age{16} /></div>)} }const Child …
阅读更多...
【洛谷 P3654】First Step (ファーストステップ) 题解（模拟+循环枚举）

【洛谷 P3654】First Step (ファーストステップ) 题解（模拟+循环枚举）

First Step (ファーストステップ) 题目背景 知らないことばかりなにもかもが&#xff08;どうしたらいいの&#xff1f;&#xff09; 一切的一切 尽是充满了未知数&#xff08;该如何是好&#xff09; それでも期待で足が軽いよ&#xff08;ジャンプだ&#xff01;&#xff09…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023