划词翻译柯林斯词典 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

的码云指数为
超过 的项目
加载中
请先登录后再评论。

暂无资讯

暂无问答

Chrome Extension 小试牛刀

自从有了Chrome以后,就喜欢上了这个浏览器,从此IE 886了。 以前作爬虫,做登录,做数据采集,做数据处理等各种功能,后来H5出来后,出现了,除了Session/Cookie 出了Local Storage,暂时还没...

2019/11/19 15:18
108
0
chrome-extension & inject.js

chrome-extension & inject.js chrome-extension://gppongmhjkpfnbhagpmjfkannfbllamg/js/inject.js inject.js /* eslint-env browser */ (() => { try { const detectJs = (chain) =...

2019/03/07 10:19
51
0
AXURE RP EXTENSION For Chrome

插件地址: 链接:https://pan.baidu.com/s/1E9OFzTck-TzW1pE59_KDGQ 密码:hxxz   1、打开Chrome浏览器,找到“工具 -> 扩展程序”;   2、将下载的Axure-RP-Extension-for-Chrome-0.6.2...

2018/04/24 15:01
3.4K
0
Axure RP Extension for Chrome

1、下载AxureRP_for_chorme_0_6_2.crx 2、打开谷歌浏览器 更多工具->扩展程序 3、将AxureRP_for_chorme_0_6_2.crx拖进浏览器、【勾选】允许访问文件网址 4、有时会出现【此扩展程序可能已损坏...

2018/04/26 10:09
388
0
Chrome安装Axure插件axure-chrome-extension

https://www.cnblogs.com/yanh0606/p/10484196.html

05/17 08:18
23
0
一起来做Chrome Extension《一些问题》

目录 Unchecked runtime.lastError: The message port closed before a response wa received. 使用 eval Content script注入iframe Extenstion内的html 站外连接 1. Unchecked runtime.las...

2019/02/27 13:25
79
0
一起来做Chrome Extension《搭个架子》

CEF - A simple Chrome Extension development falsework CEF是一个简单的Chrome Extension开发脚手架,它有如下功能: 模块化的结构,便于开发维护 支持模板 支持简单的数据绑定 发布工具,...

2019/03/06 09:56
31
0
AXURE RP EXTENSION For Chrome 问题解决办法

看了很多的解决办法,也试了很多种,有的有点用,有的只能用一次,最后成功了,在这里总结一下 一.首先下载AXURE RP EXTENSION For Chrome,很多人下载的都ctx格式的,然后拖进去安装,用了一...

2019/08/07 14:31
124
0
Chrome插件开发,美化网页上的文件列表。chrome-extension,background

上一篇文章 通过“content-scripts”的方式向页面注入js和css来美化页面,但是有一个弊端:一旦配置好需要注入的页面,之后如果这个页面地址以后发生变化,或者要新加一些URL进来,那么得修改...

2018/12/29 00:46
41
0
Chrome Extension 扩展程序 小白入门

Chrome Extension 扩展程序 阅读前的说明:本文适用于之前从来没有接触过chrome extension扩展程序的同学~ 编写demo 创建项目文件夹chrome_ext_demo,在项目根路径(chrome_ext_demo/)下创建...

2019/01/05 15:59
40
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部