MIT License

技术解读

以下内容由 GitRead 中文社区 编辑团队基于项目 README 与官方资料整理, 结合中文开发者的常见使用场景补充技术选型建议。具体以项目官方文档为准。

深度技术分析:Epiboard

项目背景与痛点

在现代化的浏览器使用场景中,新标签页的体验往往平淡无奇。面对数十上百甚至更多的浏览器标签页,新标签页成为了人们的“临时休息站”。问题在于,这些“休息站”往往只提供了基础的搜索引擎、最新打开的网站列表,以及其他一些基本功能,缺乏个性化的定制和服务性的增值功能。例如,对于技术开发者来说,常常希望在新标签页中迅速获取代码片段、查看天气预报,或者追踪任务进度等。

Epiboard 项目正是为了解决这一痛点而生。它是一款以 Material Design 为设计理念的新型浏览器扩展,旨在通过一个简洁而功能强大的界面,极大提升用户新标签页的操作体验和工作效率。

技术核心揭秘

Epiboard 使用了现代前端技术栈,包括 JavaScript、HTML、CSS,并通过 Web Extension API 实现跨浏览器兼容。其核心设计模式偏向于模块化,每个功能模块可以在保持独立性的同时,通过事件驱动机制紧密协作。此部分,我们详细解析其技术架构。

graph TD A[用户操作] --> B[事件触发] B --> C{"模块处理"} C -->|"新标签加载"| D[加载新标签页] C -->|"常规功能请求"| E[执行功能] C -->|"自定义功能请求"| F[执行自定义功能]

从上图可以看出,Epiboard 核心的处理流程包括:

  1. 用户操作触发事件
  2. 事件转发到模块处理单元的分发
  3. 根据不同的事件,调用新标签加载、执行内置功能或者执行自定义功能

这种设计模式不仅保持了功能模块的独立性,也为未来的功能扩展提供了很好的扩展性基础。

功能亮点与差异

Epiboard 更强调利用有限的屏幕空间,提供用户常用的快捷功能。它通过美观的 Material Design 风格的界面,集成了扩展插件支持,允许用户自定义新标签页的功能集合。这种灵活性让它能够适应不同的用户群体和个性化的使用需求,是其区别于同类竞品的一大差异化价值点。

应用场景与落地建议

在生产环境中使用 Epiboard 需要注意插件可能带来的性能开销以及安全方面的考虑,如确保访问权限的合理配置以避免潜在的安全隐患。此外,Epiboard 适配现代化的Web开发需求,非常适合于日常频繁需要跨多个工具进行任务管理和开发工具切换的技术开发人员。

综合评价

Epiboard 的问世,无疑为我们提供了一个具有高度可用性,同时又能自定义的新标签界面方案。它以现代设计语言和快速响应的特点,提供了高效且便捷的操作使用体验。但从另一方面考虑,由于其扩展库依赖的特点,Epiboard 在功能集成度上相对较少,且作为一个扩展插件,它需要依赖用户的其他软件配置(如浏览器的插件授权等),可能会带来额外的配置麻烦。

总体来说,Epiboard 是一个高度实用且具备潜力的项目,适用于追求高效操作体验并愿意在配置上额外投入的一些技术人员和重度浏览器用户。

语言占比

HTML
JavaScript
SCSS
Vue

Release

README

Epiboard Build Status Version Paypal Donate Licence

A new tab page adding a touch of wow and an interface following the lines of the material design. 🆕 🎉.
You can simply and quickly access the weather, your RSS feeds, downloads, sessions, keep a look on Google Trends and much more.

Highly inspired and full rework of Cardboard by dotlouis.
Available on Chrome Web Store and Firefox

Epiboard Epiboard

What is it?

Epiboard replaces the default new tab page. Where you can add cards, reorder them with drag and drop.
Colors, Dark mode, Languages, Google Trends city can be customized from the settings page.
Weather city, RSS, Downloads can be customized from the card settings.
All settings are synchronized between browsers.

Current cards:

  • Weather
  • System (Chrome only)
  • Bookmarks
  • Sessions
  • Downloads
  • Quick settings
  • Quick Links
  • RSS
  • Top Sites
  • Apps (Chrome only)
  • LastFm
  • Translate
  • Epitech
  • Isefac

Requirement

Build Setup

If you want the stable version take it from Chrome Web Store or for Firefox

# install dependencies
$ npm install
# or using yarn
$ yarn install

# build for production with minification and generate zip
# For Chromium browser
$ npm run build:chrome
# For Firefox
$ npm run build:firefox

# build for production with the bundle analyzer report
$ npm run build:chrome -- --report

# in your browser extension page
# load unpacked extension from dist folder.

Opera

  1. Install the Opera Extension that allows you to Add Chrome Extensions: HERE.
  2. Install Epiboard from Chrome Web Store or local install
  3. Install the Custom New Tab Page extension
  4. In Custom New Tab page settings enter URL: chrome-extension://eblmkpheecdcbflbhbadgfciakhlhdnm/index.html

Notes on permissions

Some of theses permissions are not optional only due to manifest/API limitations: learn more: chrome, firefox

  • storage: to save user’s settings such as background image
  • geolocation: to allow weather cards to detect your location
  • management: to display your apps not optional due to error to access icons
  • [Optional on Chrome] sessions: to retreive chrome sessions linked to your account and display them in a card
  • [Optional on Chrome] browsingData: to allow the quick-settings card to remove your cache, cookies, history and local storage
  • [Optional on Chrome] identity: to request a connection to your external account
  • [Optional] tabs: to show your recently closed tabs (sessions card)
  • [Optional] downloads: to display your recent downloads
  • [Optional] downloads.open: to open files you have downloaded from the download card
  • [Optional] system.cpu: to collect and display your computer’s cpu usage
  • [Optional] system.memory: to collect and display your computer’s memory usage
  • [Optional] system.storage: to collect and display your computer’s storage usage
  • [Optional] topSites: to display your most visited websites
  • **https://trends.google.com/trends/hottrends/visualize/internal/data**: to fetch google trends at this address
  • **https://www.google.com/doodles/search**: to fetch google doodles at this address

Wiki

Do you have any questions? Maybe the answer is in the Wiki

License

This project is licensed under the MIT License - see the LICENSE file for details

评论

暂无评论