划词翻译柯林斯词典 Chrome 扩展 youdao-collins-chrome-extension

MIT
JavaScript
跨平台
2018-06-22
oyyd

查询英文单词的柯林斯释义的chrome扩展应用。支持划词翻译,数据来源于有道词典。接入扇贝生词本,快速记录新单词,方便未来复习。

使用说明

  • 在配置页面可以设置划词翻译的模式

    • 划词即翻译

    • 按住(meta/ctrl)键 + 划词时翻译

    • 双击划词翻译

  • 快捷键ctrl+q打开右上角浮层,用于搜索单词

  • 搜索成功的单词可以快速加入到扇贝生词本(词库,oauth接入,需要你有扇贝的帐号)中,用于复习

功能介绍

1. 为什么是柯林斯词典?

chrome store上已经有很多其他词典来满足一般的英文词语意义查询。同时我在自己的单词查询过程中发现,相比于两三个中文字的单词意思解释,柯林斯词典提供了一定的英文语境可以帮我 更准确地 理解一个单词的意思,并加深记忆。

当一个单词搜不到对应的柯林斯释义的时候,这个扩展应用会使用有道词典上找得到的解释。

2. 划词翻译

划词翻译是提高查询效率的重要一环,这个扩展提供:

  • 划词即翻译

  • 按住(meta/ctrl)键 + 划词时翻译

  • 双击划词翻译

两种选择。当然也可以关掉划词翻译。

3. 有道词典数据源

改扩展的数据源来源于有道词典,但并没有通过api访问,而是直接获取页面内容再加工,理论上也就不会被api访问上线次数限制。

4. 接入扇贝生词本(词库)

市面上英语学习的软件不少,扇贝是其中之一。但我个人觉得扇贝是少数在探索如何将软件技术和语言学习有效地结合起来的产品之一,也是这个应用最后选择接入扇贝生词本的重要原因(虽然扇贝的“清空词库”功能是已经实现的功能,但却严格限制用户使用这一点,会让我这样只使用其中部分功能的用户非常费解)。通过生词本,我们每天多花一点时间复习今天碰到的单词。这让这个软件在教育、学习的层面上多了不少价值。

实现简介

本着一个应用的开发应验总是能帮助到其他踩到坑而又找不到有效信息的开发者的原则,这里简单介绍下这个应用的一些特点。

1. 用React构建UI,全内联样式

React组件的组合和复用能力非常优秀。

Chrome extension中的content scripts中加入的css样式文件会影响当前页面的样式,然而我们往往只是想把这些样式用在自己的扩展上。所以这个扩展直接全部使用了内联样式来进行处理。但即便不是在content scripts这样特殊的运行环境上,我觉得使用react加内联样式也是个好主意。

jsx和内联样式意味着一个应用的绝大多数内容都储存在了js文件中,通过我们构建使用到的js模块机制统一管理。这样的应用的代码会非常容易复用和移植。

2. 客户端直接爬取页面获得数据

因为安全原因而产生的浏览器跨域限制导致了一般web页面不能随意拉取跨域页面的信息,然而对于同是客户端性质的Chrome Extension(content scripts仍然会受到限制)和React Native等环境而言,虽然都是js,但却不受跨域限制,并且这一点很容易被忽略。

所有这个应用的数据来源是通过event page爬去页面解析而成,也正是因为这个原因,我们可以不用api,只是提取加工以下原有页面的数据即可。

而js社区中好用的、css selectors形式的静态页面解析工具非cheerio莫属。但cheerio依赖node native模块,没办法直接用在Chrome Extension或React Native上。不过没关系,我稍微修改了cheerio的代码和它的依赖的代码 - cheerio-without-node-native。你可以直接利用npm安装并用在非node环境上。

3. chrome extension中的event page和content scripts

像前面所说,event page不受跨域等限制,而且可以充分利用chrome.*上的api,具有各种丰富而强大的特性。我们在content scripts上(近似一般web页面)不能做的事情都可以放到event page上,并通过chrome api将数据发送到content scripts上。

event page为了节省性能消耗会在没有唤起消息的时候进入idle状态。这点对于开发来说很麻烦,可以在开发时设置persistenttrue,这样我们就可以在任何时候打开“背景”进行调试。

已知问题

  • 对iframe中的内容不生效

意见反馈

issues

LICENSE

MI

的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

如何做一个简单的Chrome Extension用于网页截屏

这篇文章介绍如何通过几行简单的代码,创建一个用于网页截屏的Chrome extension。

2014/07/16 09:55
6.4K
1
11 Best Google Chrome Plugins For Designers

Google Chrome has a powerful extension platform. Google chrome plugins are generally used to improve the design and flexibility....

2015/05/07 22:02
65
0
(转)获得chrome扩展的源代码

All a Chrome Extension is a few JavaScript files, an HTML page, and another file called a manifest file that tells Chrome a few settings. You can easily get to the source code o...

2014/06/08 21:53
19
0
chrome又出幺蛾子了之Cannot read property 'onMessage' of undefined?

背景 Chrome获取Mac地址实现 问题 这个问题其实还蛮影响开发和测试的 小伙伴加的代码如下 var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;//判断是否是chrome浏览器 ...

2018/05/23 22:08
474
0
利用AngularJS 实现一个 Single Page App

看了下angular 的route,用它做个非常简单的单页面应用,记录一下。 顺便说下,好处是,页面改变时不需要刷新,而每个页面都展现不同的数据。尤其在使用模板页的时候,非常方便。 一 示例 项...

2015/05/08 15:13
1K
0
基于Chrome的扩展开发(一)

Google终于放出了Chrome的第一个扩展示例,虽然还十分简陋,但对喜欢扩展的firefox粉丝来说可说是个大好消息。 准备工作:你需要使用a recent developer build 或者Google Chrome 2.0 beta....

2010/01/26 03:16
605
0
python+selenium+chrome使用socks5代理

很多人听到要走代理,就打开google开始搜索selenium上webdriver如何添加参数使用代理,搜到的结果有以下2种: 无用户密码代理 from selenium import webdriver chrome_options = webdriver....

2018/09/21 21:40
572
0
谷歌浏览器请求本地文件--allow-file-access-from-files

今天空余时候使用本地文件做练习,但是突然发现谷歌浏览器在请求的过程当中报错; 报出异常如下图: 报错内容: Cross origin requests are only supported for protocol schemes: http, dat...

2017/11/07 18:16
829
0
Metamask

MetaMask是一个开源的以太坊钱包,能帮助用户方便地管理自己的以太坊数字资产, 但在国内由于网络原因,你可能下载不了。本文将介绍如何解决metamask钱包无法下载的问题。 ![metamask钱包安装...

2018/04/28 20:48
1K
1
以太坊钱包Metamask下载和安装方法

MetaMask是一个开源的以太坊钱包,能帮助用户方便地管理自己的以太坊数字资产, 但在国内由于网络原因,你可能下载不了。本文将介绍如何解决metamask钱包无法下载的问题。 ![metamask钱包安装...

2018/04/27 19:20
387
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部