Giter Site home page Giter Site logo

crx-transit's Introduction

TransIt

TransIt 已更名为 SmoothTranslator,此项目不再开发新功能,只修复问题。

TransIt - 让划词翻译更简单

http://gdgxian.org/crx-transit/

功能列表

  • 页面英文划词翻译
  • 连续对多个单词进行划词翻译
  • 对超链接中的文本进行划词翻译
  • 调整页面划词翻译结果显示的时间长短
  • 适应更多的页面,包括 Iframe 嵌套
  • 支持在窗口边缘和选词附近两种方式显示翻译结果
  • 支持百度和有道翻译两种翻译服务

相关资源

开发

安装依赖

首先保证你的机器上装有Node, 同时Node的版本大于6.0

然后安装bowergrunt:

npm install -g bower grunt

最后, 在项目根目录运行bower installnpm install安装所有的依赖.

构建一个本地可运行的Chrome插件

grunt build

然后使用Chrome浏览器, 打开Developer mode, 然后Load unpacked extension, 选择项目根目录下的build目录即可.

打包

grunt dist

dist目录下将会有一个.zip压缩包

开发模式

grunt default

将会对项目进行编译, 然后检测文件的改变, 实时编译项目文件.

贡献者列表

crx-transit's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

crx-transit's Issues

新的开始,找回遗失的梦想

TransIt 经常这么多个版本的更新和维护,也赢得了少许的用户,非常感谢大家对这个扩展的喜爱,但比较遗憾的是,这个扩展越来越不像当初的期望它成为的那个样子,甚至不再是我喜欢的那个样子,这就像一个喜欢扎双马尾和穿哥特萝莉装的小姑娘,随着年龄的增长,为了迎合身边大众的审美,不得以放弃自己内心所爱,开始挽起头发,套上正装,逐渐失去了自我。所以,我决定做出一些改变,找回我遗失的梦想,虽然会损失一些用户,但能够追逐自己喜爱的事物,我想是值得的。我业余开发的应用的第一用户肯定是我自己,如果自己都不喜欢,我想我大概不可能把它长久的做下去。

新的名字

TransIt 这个名字虽然比较直白,但 transit 这个词本身已经有运输的意思了,长久的看,它并不是一个合适的名字,对于陌生人,比较会引起歧义。TransIt 的初衷,是为了在尽量不打断阅读的情况下,让划词翻译变得更简单,就好像如果你是个孩子,学着阅读一个英文的童话故事,突然碰到个不会的单词 apple,你用手一指,看一眼旁边的姐姐,姐姐轻轻得告诉你:「苹果」,并且给你一个甜甜的微笑,然后你安然的继续探索这吸引人的故事,而不是翻开一本厚厚的朗文字典,粗暴的拍在书上,不断重复「apple, 苹果, apple, 苹果, apple 苹果, a-p-p-l-e apple」,念完后可能觉得之前的故事都索然无味了。

温柔,是我对 TransIt 的期许,所以我给她取了新的名字「Smooth Translator」。

抛开枷锁

TransIt 之前一直在尝试添加更多词典的支持,以图满足更多用户的喜好,但也逐渐的失去了自己的初衷:让划词翻译更简单,更多的词典支持并没有让翻译变得简单,反而为了兼容不同的词典,让我无暇去改进已有的功能。而添加的所有不同的词典,做的却都是同样的事情,查询单词翻译句子

就单词而言,大家都差不多,因为英语单词的意思是固定的,翻译句子虽然各家有所不同,但并没有量级上的差异,TransIt 从来都不是一个专业的词典,只是一个辅助阅读工具,不是学究。

基于以上的考虑,我决定移除百度词典和必应词典的支持,只保留有道翻译。翻译这件事,有一个服务能做就可以了,我要做的是,让划词翻译这件事,更简单,更贴心。

此外,我还计划移除「翻译结果在划词附近显示」这一设定,它是干扰阅读的元凶,我非常不喜欢这个功能。有的用户有反应,TransIt 在大屏幕上,窗口边缘的翻译结果会离划词的地方太远,眼珠或者脑袋需要转动比较大的角度才能看到。对于这种情况,其实把窗口调小一些就完全不是问题了,退一步讲,即使窗口不想调小,扭一下头或者撇一眼就能办到的事情,没有必要打开一个浮动窗口好几秒停留在自己的视野之内,有时还要手动关闭。

当然了,有的用户无法接受边缘的这种形式,那我很乐意推荐其它的词典扩展,因为它们几乎无一例外的默认就在鼠标附近显示,而且无论是翻译结果的详细程度,还是外观和交互,都胜过 TransIt 很多。

美好的未来

不打断阅读让划词翻译更简单这个方向出来,Smooth Translator 的未来还是大有可为的,从 2.0 开始,我准备陆续加入一些新特性以前旧功能的改进。

1. 链接取词快捷键的变化

链接取词是 S.T 的一个非常独特的功能,它解决了我翻译链接中文字的苦恼,但数次变化的快捷键也让使用它变得困难,因为它在不同的键盘上,可能会失灵,新的版本,链接取词的快捷键改为 Chrome 扩展官方推荐的触发方式,用户可以在浏览器中自己设定启用的快捷键。

2. 针对域名的启用和禁用开关

在有的网站上,我们不太想触发划词翻译,之前并没有提供针对域名的启用/禁用划词翻译的功能,新的版本会加入这个功能,可以在一些网站上让页面划词关闭(划词关闭后,你依然可以选择文字,然后点击扩展图标,在打开的小窗中看到页面选中文字的翻译结果)。

3. 扩展小窗口中随输随译

点击扩展围标打开的小窗口中,输入框不再需要考虑怎么换行,以及敲回车提交,一边输入,一边会显示翻译的结果。省力又省心。

4. 地址栏翻译

Chrome 的地址栏是一个非常棒的地方,以后我提供地址栏的快捷翻译的功能。比如 Cmd+L 或者 Ctrl+L 激活地址栏,输入 st 后按 Tab 键进入翻译模式,输入结果会在地址栏显示出翻译,不需要打开额外的窗口。

5. 阅读翻译结果

有可能会提供一种模式,划词后什么都不显示,而是利用 tts,读出翻译的结果,可以设定只读发音、只读第一条解释、以及读全部的解释。

6. 翻译服务主备切换

目前有道翻译是通过抓取页面的方式来获取翻译结果的,之前有使用过 API,但个人开发者,API 频次限制很容易就超出了。所以打算以抓取页面为主,但如果有道更新页面结构,可能导致翻译失败,为避免有道翻译页面变更时翻译完全瘫痪,会自动切换到 API 模式,想来这个时间段,足够我升级爬虫了。

7. 缓存翻译结果

对于翻译过的结果,会在浏览器中作一层缓存,再次请求时不用再重新抓取页面或者调用 API,缓存应试会有一个失效时间,比如一个月。这个缓存并不会作为第三方数据源提供给其它服务,也不会被发送到其它服务器存储,只在用户浏览器端生效,所以也并不会违反有道 API 的协议。

8. 剪贴板翻译

对于 pdf 中的文字,也许可能通过复制到剪贴板的 + Notification 的形式提供翻译结果,我还不确定此路是否行得通。

9. 语音

通过语音输入英文单词,然后自动获取翻译结果,解放双手(路子太野,不确定)。

结语

每一个想要加入的新特性我都会两三考虑,如果它不能让翻译变得更美好,肯定会被舍弃。如果你喜欢 Smooth Translator 的理念,请留在这里和我一起记她变得更美好。

控制台报错

Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

你好!

你好!
关于安装想问下 "步骤3.选择源文件中的 extension 文件夹并打开" 发现clone 的文件夹中没有 Extension 文件夹, 如果选择最外层的文件夹crx-transit, 添加不了; 可能我哪里操作不当, 求指导下

Translt 有道翻译下出现异常

Translt 偏好设置为:使用有道翻译,经常出现翻译不了的情况,停留在正在翻译界面,并且一段时间后弹窗不会消失。

支持百度翻译

支持百度翻译

让用户可以自主选择是使用百度翻译还是有道翻译。

允许用户指定翻译的语言

在之前的版本发布后,不少用户反馈希望增加指定翻译语言的功能,这样可以支持对其它语种的翻译了。如果用户不指定语种,则由翻译服务自已检测。

但是我们目前使用的有道翻译不支持指定语种,所以我打算切换到百度翻译,它支持更多语种,调用限制更加宽松。

源代码版本的插件无法安装

看到西安的乡党做了这个划词翻译扩展,非常开心,我fork了一份源码,想在本地安装,但错误非常多... 比如html中引用的是css文件,但其实提供的是scss文件;比如import的sprite.scss,但提供的文件是_sprite.scss;比如取sprite.svg的目录层级不对... 求问是不是我安装姿势不对... npm install之后需要执行哪些步骤?

翻译结果目前在右上角,但在大分辨下效果不好

关于这个 feature 我的思路是这样的:我们提供两种翻译结果的呈现方式

方式1

在右上角弹出(目前的方式),但允许用户按百分比或者像素设置右边距和上边距,甚至可以考虑是从哪个方向弹出。

这样可以部分解决大屏幕用户的需求,我之前想过检测网站有效内容的范围,但是经过仔细考虑后觉得不靠谱。

方式2

在划词位置即时弹出结果,像大多数划词翻译软件的做法,这个就不受屏幕大小的影响了。

添加独立的设置页面

随着 TransIt 的功能越来越丰富,定制性越来越高,在 Popup 中显示所有的配置项,已经不再合适,所以,需要一个独立的配置页面来管理用户偏好。

当然,对于一些常用的配置项,还要是在 Popup 中留一个接口的,比如划词开关链接取词开关。不过可以使用图标的形式,这样会更加直观,也更省空间。

TransIt 是否需要添加发音功能

之前有用户提出,希望可以增加自动发音功能,这个功能做起来虽然不麻烦,但希望和大家讨论下,这个功能是否有必要。

因为目前的翻译结果中已经提供了音标,对于发音,已经有了一部分辅助,是否还需要像其它辞典一样,提供英式和美式的发音,如果后面添加更多语种,发音就会从一个小功能变成一个大功能。因为适配不同的语言,也是比较麻烦的事,而且百度翻译和有道似乎也都没有提供获取发音的接口。

基于以上的考虑,我个人觉得提供发音这个功能不是特别必要,但既然有用户提出来,我也想听听大家的意见。

wikia的网站不能取词、

wikia的网页选词后都必须点击图标才能看解释。希望能够修复。
update:有时可以有时不行,不知何故。大部分时间都不行。已经翻墙,确定不是网页载入不完整的问题。

划词后页面自动朗读单词和释义

添加一个选项,让用户可以在划词后页面不显示翻译结果,而是自动通过语音朗读出来发音和释义。

发音可以抓取国内流行翻译网站的发音,释议可以使用百度 tts api.

一些可能的定制:

  • 只朗读音标
  • 只朗读释义
  • 朗读音标和释义
  • 释义只朗读第一条

关于划词结果就近显示的BUG

你好,我最近也写了一个Chrome的划词扩展,开始是写的浏览器按钮部分,后来学习写划词功能时看到了你们的代码,所以稍微研究了一下。目前发现了一个小BUG,就是在选择划词结果就近显示的时候,如果网页没有声明DOCTYPE,用bottom定位显示位置就会出现问题。
比如这个网页:
http://pages.cs.wisc.edu/~remzi/OSTEP/
还有Hacker News: https://news.ycombinator.com/news

原因好像在于body元素的height受DOCTYPE的影响。
我试了分别取document.body.clientHeight和document.documentElement.clientHeight
在声明DOCTYPE 时
document.body.clientHeight是会随着body的元素的高度而改变
document.documentElement.clientHeight是固定值,大概是浏览器可视范围的高度(这是我的猜测)
在没有声明DOCTYPE时
document.body.clientHeight变成了上面的那个固定值
document.documentElement.clientHeight是会变化的值

如果是在这个程序里,只有取那个固定值,划词结果才会显示在正确的地方,我开始是把getSelectionRect(evt)函数里面计算bottom的代码改成

var clientHeight = (document.documentElement.clientHeight > document.body.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
var bottom = clientHeight - top;

但是有的网页document.body.clientHeight会返回0
所以我又在加上了一个判断

if (clientHeight == 0) {
clientHeight = document.documentElement.clientHeight;
}

这样暂时解决了一些问题,但是究竟怎样判断这个高度、这个原理是什么我还没有弄清。麻烦你们也测试一下吧。我是个前端新手,希望你们可以多多指点,谢谢。

更方便的链接划词翻译

通过左右移动鼠标两次来临时激活链接划词模式而不使用其它辅助按键。

shift / ctrl / alt 等辅助键都有其保留的功能,如果 transit 占用,会对浏览器的正常操作造成影响。

手动关闭按钮?

能否增加一个手动关闭按钮,有的时候查看翻译过后需要等待自动关闭才能查看被窗口挡住的内容。

TransIt会导致新版的Gmail机器卡顿

你好,
我发现当开启TransIt(Store版 v1.6.6)后,进入新版的Gmail网页会非常卡顿。主要表现在鼠标移动时,Gmail会话被选中的动画不跟手,载入Gmail时间长,且高CPU占用率,加载完成后也会有一段时间的假死期。同时如果切换页面内容,比如打开会话,或者切换上一个下一个会话时,也会产生假死卡顿。
暂时不清楚对其他网站是否也会产生这个问题,但是Gmail下问题非常明显,麻烦开发者能够看一下哈。
谢谢

设置主题或者皮肤?

现在transit是用过的最好的划词翻译扩展,但是绿底白字我觉得不太好看,能不能增加一个选项,可以更换皮肤的,白底黑字,就跟Google Translate 以及github界面一样。

谢谢~

加上有道词典的“网络释义”

由有道词典官方的 chrome 插件切换到 TransIt,
发现没有 “网络释义”。网络释义能够比较好地解决领域专用词汇的多种释义问题,少了这个的话比较影响使用。希望能够加上。

感谢

页面划词支持翻译大段文本

目前的 TransIt 页面划词只能翻译英文单词,不能翻译大段的文本甚至英文短语,所以在这个版本,我准备支持对长文本的划词翻译。

考虑到选择长文本时,翻译结果会很占空间,所以打算有如下处理:

  • 文本超过一定长度(比如 15 个字符),只显示前 15 个字符,剩余的部分在鼠标移上去时再显示完整内容。
  • 用户可以自己在配置中设置划词翻译的长度限制,选择的文本超过长度,则不显示页面翻译

其实一开始,transit 就支持长文本的翻译,但不是在页面中,而是在 Popup 里面,页面选择文本后,打开 Popup 就能把选中的内容在 Popup 中翻译出来,不喜欢页面划词的朋友其它也可以仅用这个来翻译选择的文本,也挺方便的。不过目前 Popup 中输入文本的是一个文本域,文本较长时,查看不方便,所以准备改为 TextArea,这样方便显示较长的文本。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.