链接管理插件
项目背景：在工作的时候，不同的项目之间、同一个项目中的不同环境，都会存在大量的链接（nacos、jenkins、某些登录页等等），不想分脑容量记这些烂糟事，用书签管理觉得也挺烦（因为我书签太多了，哈哈哈哈哈），当然，可以去扩展商店去找专门的插件（之前使用的itab老是失效，失效以后就得重新管理，很烦），忍无可忍，所以决定自己写一个插件
要实现的效果
- 链接持久化到数据库中，暂时没考虑到登录和数据权限的事情
- 菜单通过层级进行显示
- 菜单页面支持模糊查询和刷新
- 用户操作页面时，可以弹出提示
技术栈和库的选择
- 页面搭建：cursor当仁不让
- 后端服务：vercel的serverless，最主要的原因是免费
- 数据库：svnCloud，选择原因依旧是免费，常用菜单栏数据一般不会超过5M，所以穷逼套餐够用
- icon库：font awsome库
- 提示插件：网上找的一个轻量化的Jquery组件 信息和删除提示弹窗jQuery组件 Download
项目实现
浏览器插件项目工程实现（前端）
mainfest.json，更多mainfest.json配置： v3版本mainfest配置解析
json{ "name": "工作链接管理插件", // 插件名称 "description": "", // 插件描述 "version": "1.0", // 插件版本 "manifest_version": 3, // mainfest版本, 2已放弃维护 "permissions": [ "storage" ], // 用于指定扩展程序可以访问的主机范围 // 举例：我获取的菜单的接口是 http://api.xxx.top/getMenuList "host_permissions": ["*://*.xxx.top/*"], // 定义扩展程序图标在 Google 工具栏中的外观和行为 "action": { "default_popup": "popup.html", "default_icon": { "16": "image/16x16.png", "32": "image/32x32.png", "48": "image/64x64.png", "128": "image/128x128.png" } }, "icons": { "16": "image/16x16.png", "32": "image/32x32.png", "48": "image/64x64.png", "128": "image/128x128.png" } }
vercel部署serverless（后端）的具体搭建流程参考： vercel部署serverless
font awsome库（版本：Font Awesome 4）的使用
引入
国内 CDN 的链接
html<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">海外 CDN 的链接
html<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">下载链接到本地 Font Awesome 4 Download
使用示例
html<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <i class="fa fa-car"></i> <i class="fa fa-car" style="font-size:48px;"></i> <i class="fa fa-car" style="font-size:60px;color:red;"></i> </body> </html>具体的使用效果（调整大小、动态效果）可以跳转到教程查看 Font Awesome 图标 | 菜鸟教程