2014-02-02 Google Chrome插件 - TranslateABC V2的实现

前一段写过一个blog,关于如何实现一个页面选择文字自动翻译的插件,自己用着还挺爽。 blog地址在这里。用了一段时间,感觉可以支持一下背单词的功能,可以加强记忆。 最初的想法是在每一次翻译的时候,自动添加到有道词典的单词表里面。后来找找,发现有道没有这样的API。 没办法,只好用本地存储来缓存所有查询过的单词,并且实现类似有道词典的记单词的功能。

项目介绍

项目的源代码在 https://github.com/liuyuanreading/TranslateABC_V2

因为咱没有申请Google开发帐号,因此只能直接提供插件文件下载,在这里

主要的原理其实很简单,就是在原始版本的基础上,使用localStorage保存所有查询过的单词。单词以及翻译使用JSON形式保存在localStorage里面。

插件功能

插件提供的主要功能有

  1. 简单的管理功能。 可以删除一些误查的,或者无需记忆的单词。
  2. 背单词功能。 这个是模仿有道词典的背单词功能的,只不过没有所谓的贝叶斯记忆曲线来安排记忆(这个倒是可以在以后的版本实现)。

开发难点

对我来说,难点主要还是在javascript和web展现上。很多基本的东西都需要google来知道。 而且我估计如果使用了JQuery应该代码量会更少。
对JSON的使用也比较笨手笨脚。好在基本功能实现了。
还有就是插件的debug技巧。虽然大部分问题我还是基于alert来解决,偶尔也能帮助于Inspect Element来实现,看看error来判断代码错误还是很方便。
还有就是CSS和界面设计的问题。。。我自己都不知道什么样子好看。。设计。。我只能说目前只满足我使用。如果有朋友提出好的建议,我也可以考虑实现增强。

界面UI

界面UI如下 - 有新的版本修改,参考下面的update

update 2014-2-26

用的过程发现2个问题,一个是没有关闭翻译功能的选项,因此平时网页选中的内容都会去翻译。
第二个问题是UI的问题,放在一起太拥挤了。
因此又花了点时间fix了下。

  1. 新增了关闭翻译的选项
  2. 使用tab方式来整理页面上的内容。
    给个新的截图

选项tab

translateABC_V2_tab1.png

回忆单词tab

translateABC_V2_tab2.png

管理单词tab

translateABC_V2_tab3.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 177,041评论 25 709
  • 前世今生的缘份还是没有割断,胸怀宽广,还想再来续前缘今爱,片片相思几度情愁,菩提树前的世人,想找个归家,打不开的心...
    嬛情阅读 1,670评论 0 0
  • 你把流浪看的很平常 你觉得放荡是很多人的向往 你也把任性常常挂在嘴旁 你照着镜子放肆的狂 苦笑你从不会挂在脸上 你...
    叁久章阅读 2,571评论 2 9
  • 前几天听朋友说了一件事,朋友的亲戚找到男朋友了,而且未婚先孕。 朋友的亲戚是个80后女孩儿。她出生于1987年,家...
    duoxiyitu阅读 3,161评论 0 0

友情链接更多精彩内容