跳到主要内容

浏览器书签开发

  • 搜索书签
    • 支持显示书签所在层级
    • 支持拼音搜索
    • 支持url、图标显示
  • 同步书签
    • 同步书签到github
    • 下载书签到本地浏览器
  • 版本记录
    • 通过commit记录，来进行版本切换
  • 自动同步书签
    • 监听书签是否发生变化，发生变化自动同步
  • 操作书签
    • 增删改查 【这个其实没什么必要，用浏览器自带的也够了】

项目搭建​

使用vite搭建

  • 1、使用vite来构建项目打包
  • 2、将打包后的dist文件，加载到浏览器扩展中
    • 点击“加载已解压的扩展”，选择 dist 目录

开发环境​

参考：https://zhuanlan.zhihu.com/p/628015223

  • @samrum/vite-plugin-web-extension@latest
    • 使用vite构建完整的 Chrome 扩展程序
    • 自动构建 manifest.json
    • 支持弹出窗口
  • @types/chrome
    • TypeScript chrome 全局API

搜索书签​

从远程服务器获取书签数据

  • 1、模糊搜索、排序
  • 2、高亮
  • 3、tab提示补全
  • 4、拼音搜索
  • 5、展示书签所在层级

借助第三方库

  • pinyin
    • 拼音库

持久化缓存​

  • 配置缓存 storage权限

  • chrome.storage API 来实现数据的持久化缓存

同步书签​

同步github​

  • Github 有着免费的存储空间
  • 通过github的api，可以轻松将一些文件数据上传到github存储管理

参考：

https://github.com/dudor/BookmarkHub

  • @octokit/rest
  • @octokit/plugin-create-or-update-text-file
    • octokit插件，提交的内容可以是字符串或者返回回调，而不是base64
    • createOrUpdateTextFile方法，可以返回一个updated，用来判断内容是否有更新，如果内容没有更新，则返回false,表示不会更新内容，返回true，表示更新内容成功

@octokit/rest ` GitHub 官方提供的 Octokit 库，用于与 GitHub API 进行交互, 可以轻松集成 GitHub 功能