0

0

最近升级了我的『温故知新』Chrome插件,现在写写心路历程_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:26:23

|

1350人浏览过

|

来源于php中文网

原创

春节假期快结束的时候,终于是找到了些时间来埋一埋去年的坑。经过2.2.0到2.2.6几个版本,终于把新版完成了。

在去年年中的时候,我开发了一款chrome应用,目的是为了方便自己整理自己的书签栏。想法很简单,就是利用零碎的时间去review自己的书签栏,没有用的就可以删除掉了。毕竟,单独拿出时间去整理书签栏,是个很累人的活,把这个活分散成零碎的时间去完成,倒也惬意。

这个想法其实是四年前的,只不过一直没去做罢了。每当自己的书签栏迫切需要整理的时候,就会想起来这个想法。终于在去年7月左右开始动工了。

不过开发进展不是很顺利,毕竟自己不是个专业前端,英语水平也一般,看chrome的文档就耗费了很多精力。先是把整个的chrome的文档页面的结构理顺了一下。真的是很想吐槽下chrome开发的文档组织的很糟糕,Api接口的列表的进入放在了一个三级的目录中,几乎每次要找一个Api接口的时候,都要翻好久,主要是找一级菜单就要花好久。

立即学习前端免费学习笔记(深入)”;

后来习惯后,也就习惯了。。。

最初的计划是能够每次打开新标签页的时候,自动提醒一次,提醒的数据是随机从书签栏里获取,使用 Chrome 的 Notification 接口显示书签名和地址,并提供打开和删除按钮。(原始想法,雏形)

但是在开发的过程中,首先发现的问题是,随机获取一个书签并不是像自己想的那样。 本来计划是扩展安装的时候,自动把书签一次性读入到html5的本地存储中去,然后从本地存储中随机获取。但是这里面涉及到几个点:

1、使用何种本地存储能方便的检索数据?2、用户变动书签信息(增加、删除)的时候,还需要同步到本地存储中。

考虑到后期可能会迁移到 Firefox 和 Safari,于是选择本地存储的时候,我除了考虑数据的获取外,还参考过兼容列表。最终觉得还是先不要想那么远了,先把chrome版本的做好再说其他的。于是选择了IndexedDB。

然后的问题就是如何随机。在考虑这个问题的时候,我最先想到的就是获取本地存储中的书签列表的索引范围,然后写个方法来从这个索引范围中随机一个数。但是后来觉得这样不是很妥,如果随机性不是很好的话,那么可能某些书签被随机到的概率很大,那么效果就不理想了,或者是某个书签连续几次都被随机到,那么用户体验也是不好的。

那么能不能加个访问量的字段,然后把这个字段纳入到随机数的计算中呢?倒是可以,不过貌似这样程序就复杂了太多了,我也不知道最后做出来的效果是否满意,所以最后就放弃了随机一条书签的计划,改成顺次提取一条书签了。实验证明,这个方案至少我自己是满意的。

另外的就是找到书签的监听接口,在用户操作书签的时候,能把数据同步到本地存储中。不过这里当时为了赶时间尽快做出来看效果,就省掉了数据同步,而是每次打开新标签页获取一条书签的时候,都会读一遍全部的书签列表,然后把索引记录在本地存储中,以及这次访问的索引值存储在本地存储中。

第一版差不多就这样勉强的上线了。

上线后,发现还是有不少人来安装,真的是很感谢这些初期的用户。但是貌似我没有具体的运营数据。于是又研究了下 Google Analytics,在扩展中加入了一些操作事件的记录,依次来看一下,现在有多少人在用,提醒了多少次书签,删除了多少次书签。依次来判断我的扩展的价值。

之后,有用户开始反馈。反馈的主要问题就是弹出框和不再提醒机制。

弹出框的第一个问题,主要就是各个操作系统的 notification 差异性导致的。在 Win 下,notification 是在右下角弹出,而 Mac 和 Linux 下是在右上角。我的开发环境是 Mac,所以最初在右上角弹出,我觉得可以,就没有多留意。后来 Win 用户提出来能不能把提醒从右下角放到右上角,我才发现了这个问题。

There’s An AI For That
There’s An AI For That

全球领先的 AI 聚合器,收集10,225个AI工具,可用于超过2,548个任务。

下载

弹出框第二个问题,右上角弹出的时候,有时候可能正好挡住了标签页的关闭按钮(在标签页打开了很多的时候),这样进行关闭标签页的操作时,要先关闭 notification ,才能点击标签页的关闭,显得很不方便。

弹出框的第三个问题,chrome升级某个版本后,notification 不再自动关闭了,只能手动关闭了。

弹出框的第四个问题,chrome 的 notification 只支持添加最多两个按钮,而当前已经有『打开标签页』和『删除』两个了,想再增加『不再提醒』按钮是不可能了。

关于『不再提醒』功能,是用户提出来的,希望能够把一些书签设置为『不再提醒』。

针对用户提出来的这些问题,我一直都很想处理,最后还是拖到了年后。

年后第一版v2.2.0,重构了本地存储部分,把书签存储在了 localStorage 中,并且完成了用户变动书签后,自动同步到 localStorage 中,这样每次取数据的时候,只需要从 localStorage 中获取 bookmark_id ,然后再调用 Api 取详细信息即可。这样也便于以后向 Firefox 和 Safari 迁移。

v2.2.0 – v2.2.2 还弃用了 notification 接口,使用替换『新标签页』的方式,我自己写了一个 html 页面,可以显示书签标题和网址,带 iframe 预览功能,带『新标签页打开』,『删除』,『不再提醒』等按钮。

上线后,好几个用户反馈能不能不替换新标签页。其实我最初也是不想替换的,但是无奈 chrome 应该处于安全考虑,不允许向 chrome://newtab/ 插入js代码,所以我也是不得已为之啊。

不过经过思考,觉得没必要非要在『新标签页』中进行提醒呀。于是开始开发迷你模式,即把弹层放到了正常的网页中去,也就是现在 v2.2.6 版本大家所看到的。

到此,这个扩展应该基本上就完成了。估计短时间内是不需要增加或者修改什么功能了。

总结一下,开发扩展基本上就跟开发传统软件是一样的了,应该要遵循传统的流程。平时自己写 PHP 网站写习惯了,遇到问题随时修改随时上线。现在扩展出个bug,至少要60分钟才能发布完毕,等用户升级到新版本还不知道什么时间。我在开发的时候,经常遇到的就是这个问题,某个版本发布前已经测试的很不错了,结果在商店点击完发布了,又用了几次就发现新问题了,导致自己不得不增加版本号,重新上传修复bug后的版本进行发布。

另外就是需要加强与用户的沟通和交流,现在感觉做的最不足的就是这一点。其次就是交流后,用户反馈的哪些该采纳,哪些该舍弃,还是个很让我迷惑的问题。这个还需要再思考思考。

最后,附上扩展地址和反馈地址:

http://bm.to0l.cn/

https://gitter.im/ety001/bookmark-extension

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

6

2026.02.28

Golang 工程化架构设计:可维护与可演进系统构建
Golang 工程化架构设计:可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

6

2026.02.28

Golang 性能分析与运行时机制:构建高性能程序
Golang 性能分析与运行时机制:构建高性能程序

Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面,深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略,并结合实际案例剖析 Go 程序的运行时行为,帮助开发者掌握构建高性能应用的关键技能。

8

2026.02.28

Golang 并发编程模型与工程实践:从语言特性到系统性能
Golang 并发编程模型与工程实践:从语言特性到系统性能

本专题系统讲解 Golang 并发编程模型,从语言级特性出发,深入理解 goroutine、channel 与调度机制。结合工程实践,分析并发设计模式、性能瓶颈与资源控制策略,帮助将并发能力有效转化为稳定、可扩展的系统性能优势。

14

2026.02.27

Golang 高级特性与最佳实践:提升代码艺术
Golang 高级特性与最佳实践:提升代码艺术

本专题深入剖析 Golang 的高级特性与工程级最佳实践,涵盖并发模型、内存管理、接口设计与错误处理策略。通过真实场景与代码对比,引导从“可运行”走向“高质量”,帮助构建高性能、可扩展、易维护的优雅 Go 代码体系。

17

2026.02.27

Golang 测试与调试专题:确保代码可靠性
Golang 测试与调试专题:确保代码可靠性

本专题聚焦 Golang 的测试与调试体系,系统讲解单元测试、表驱动测试、基准测试与覆盖率分析方法,并深入剖析调试工具与常见问题定位思路。通过实践示例,引导建立可验证、可回归的工程习惯,从而持续提升代码可靠性与可维护性。

2

2026.02.27

漫蛙app官网链接入口
漫蛙app官网链接入口

漫蛙App官网提供多条稳定入口,包括 https://manwa.me、https

130

2026.02.27

deepseek在线提问
deepseek在线提问

本合集汇总了DeepSeek在线提问技巧与免登录使用入口,助你快速上手AI对话、写作、分析等功能。阅读专题下面的文章了解更多详细内容。

8

2026.02.27

AO3官网直接进入
AO3官网直接进入

AO3官网最新入口合集,汇总2026年可用官方及镜像链接,助你快速稳定访问Archive of Our Own平台。阅读专题下面的文章了解更多详细内容。

208

2026.02.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
c语言项目php解释器源码分析探索
c语言项目php解释器源码分析探索

共7课时 | 0.4万人学习

PHP面向对象基础课程(更新中)
PHP面向对象基础课程(更新中)

共12课时 | 0.7万人学习

ThinkPHP6.x API接口--十天技能课堂
ThinkPHP6.x API接口--十天技能课堂

共14课时 | 1.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号