Skip to content

PlayWithAndyJin/ModernPanel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Modern Panel - 现代化浏览器新标签页扩展

Modern Panel Logo

Modern Panel 是一款界面美观的 Chrome 浏览器扩展,旨在为您提供全新的新标签页体验。通过现代化的设计语言和丰富的自定义选项,让您的浏览器主页变得更加实用和个性化。了解更多可以前往网页https://panel.andyjin.website

index

主要特性

视觉体验

  • 动态背景图片:支持 Picsum 随机图片和自定义上传
  • 实时时间日期:精准显示当前时间和日期
  • 流畅动画效果:优雅的过渡动画和交互反馈
  • 深色/浅色主题:自动适配系统主题或手动切换

智能搜索

  • 多搜索引擎支持:Google、Bing、百度、DuckDuckGo 等
  • 自定义搜索引擎:支持添加个性化搜索服务
  • 实时热点搜索:集成热门搜索词推荐
  • 智能搜索建议:根据输入内容提供相关建议

书签管理

  • 可视化书签卡片:美观的磁贴式布局展示
  • 拖拽排序:直观的书签整理体验
  • 分组管理:支持创建书签文件夹分类
  • 快速访问:一键打开常用网站

个性化设置

  • 网格布局自定义:灵活调整书签显示列数
  • 消息通知样式:多种弹窗显示方式选择
  • 自动更新检查:智能检测新版本并提醒
  • 数据持久化:所有设置自动保存到本地

安装方式

目前支持Google Chrome和Microsoft Edge安装(均需开启开发者模式),本文以Chrome为例~

开发者模式安装(推荐)

  1. 下载并解压扩展包到本地文件夹
  2. 打开 Chrome 浏览器,访问 chrome://extensions/
  3. 开启右上角的"开发者模式"
  4. 点击"加载已解压的扩展程序"
  5. 选择解压后的文件夹目录

注意事项

  • 确保 Chrome 版本 ≥ 88.0
  • 安装后建议重启浏览器以确保功能正常
  • 如遇问题可在扩展管理页面重新加载扩展

快速开始

基础使用

  1. 安装完成后,每次打开新标签页都会显示 Modern Panel
  2. 默认显示时间、日期和搜索框
  3. 点击右下角设置按钮进行个性化配置
  4. 通过拖拽方式添加和管理书签

常用操作

  • 添加书签:点击"+"按钮或右键菜单
  • 编辑书签:点击书签卡片上的编辑图标
  • 删除书签:点击书签卡片上的删除图标
  • 搜索网站:在搜索框中输入关键词
  • 切换背景:在设置中选择图片源或上传自定义图片

技术架构

核心组件

  • Manifest V3:遵循最新的 Chrome 扩展规范
  • 模块化设计:各功能模块独立开发维护
  • 响应式布局:适配不同屏幕尺寸
  • 性能优化:轻量级代码,快速加载

主要技术栈

  • 前端框架:原生 JavaScript + HTML5 + CSS3
  • 状态管理:localStorage 持久化存储
  • 网络请求:Fetch API 异步数据获取
  • 图像处理:Canvas API favicon 获取
  • 动画效果:CSS3 Transitions & Animations

安全特性

  • 内容安全策略:严格的 CSP 配置
  • 权限最小化:仅申请必要权限
  • 数据隐私:所有数据本地存储,不上传服务器
  • HTTPS 支持:网络请求强制使用安全协议

响应式适配

Modern Panel 完美适配各种设备:

桌面端(≥1024px)

  • 完整功能展示
  • 多列网格布局
  • 丰富的交互效果

平板端(768px-1023px)

  • 自适应列数调整
  • 触摸友好的交互设计
  • 优化的字体大小

移动端(≤767px)

  • 单列布局优化
  • 简化的操作流程
  • 流畅的手势支持

故障排除

常见问题

Q: 扩展无法正常加载 A: 检查 Chrome 版本是否 ≥ 88.0,确认扩展权限设置正确

Q: 背景图片不显示 A: 检查网络连接,确认图片源设置正确,尝试刷新页面

Q: 书签无法保存 A: 检查 localStorage 存储空间,清理浏览器缓存后重试

Q: 搜索功能异常 A: 确认网络连接正常,检查搜索引擎配置是否正确

Q: 时间显示不准确 A: 扩展使用本地系统时间,如需校准请调整系统时间设置

调试方法

  1. 打开 Chrome 开发者工具(F12)
  2. 查看 Console 面板的错误信息
  3. 检查 Network 面板的请求状态
  4. 验证 Application 面板的存储数据

版本更新

更新日志

查看详细的版本更新历史,请访问我们的更新日志页面

自动更新

  • 扩展支持自动检查更新功能
  • 可在设置中配置检查频率
  • 发现新版本时会及时提醒

手动更新

  1. 下载最新版本的扩展包
  2. 解压到原文件夹(覆盖旧文件)
  3. 在 Chrome 扩展管理页面点击"重新加载"
  4. 或卸载后重新安装新版本

许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

支持与反馈

联系方式


Modern Panel - 让每一次新标签页都成为美好的开始

返回顶部

About

A Modern Browser Tab Panel

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors