npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

translation.js

v0.7.15

Published

集成多种翻译引擎并提供统一的翻译接口。

Downloads

633

Readme

translation.js NPM Version

translation.js 整合了谷歌翻译百度翻译有道翻译的网页翻译接口,让你方便的在这些翻译接口之间切换,并获取相同数据结构的翻译结果。

特点

可在 Node.js 及 Chrome 扩展 / 应用中使用

translateion.js 能同时在 Node.js 和浏览器端运行,但由于浏览器端同源策略的限制,这些网页接口只能在允许跨域的运行环境使用,Chrome 扩展 / 应用则是其中之一。

注意:为了能在 Chrome 扩展 / 应用中使用 translation.js,请阅读在 Chrome 扩展 / 应用中使用

一致的参数与数据结构

每个网页翻译的接口都有不同的参数和翻译结果,translation.js 统一了这些不同之处并提供了一致的 API,同时提供了每个接口的源数据方便自定义处理。

安装

在 Node.js 或 Webpack(及类似的模块打包工具)中使用

先用 NPM 安装:

npm install translation.js

然后在代码中引用:

// CommonJS 中
const { youdao, baidu, google } = require('translation.js')

// ES6 中
import { youdao, baidu, google } from 'translation.js'

使用 <script> 标签

在 Chrome 扩展 / 应用中使用 <script> 标签引用时,你需要先下载下面的文件到你的项目里:

然后在 HTML 中引用:

<!-- 如果你需要使用有道翻译就需要先引用 md5.min.js -->
<script src="path/to/md5.min.js"></script>
<!-- 然后引用 tjs.browser.js -->
<script src="path/to/tjs.browser.js"></script>
<!-- 然后你就可以从全局变量 tjs 中获取翻译对象了 -->
<script>const { youdao, baidu, google } = window.tjs</script>

使用

所有翻译对象都有相同的三个方法:translate()detect()audio(),下面会使用 google 作为示例,但同样的代码换成 baiduyoudao 也是一样能运行的。

获取翻译结果

获取一段文本的翻译结果可以用 translate() 方法:

google.translate('test').then(result => {
  console.log(result) // result 的数据结构见下文
})

其中 result 的结构示例如下:

{
  text: 'test', // 此次查询的文本
  raw: { ... }, // 接口返回的原本的数据
  link: 'https://translate.google.cn/#en/zh/test', // 在线翻译地址
  from: 'en', // 文本的源语种
  to: 'zh-CN', // 文本的目标语种
  // 单词的音标,目前只有用百度翻译英文单词才可能有
  phonetic: [
    {
      name: '美',
      ttsURI: 'https://fanyi.baidu.com/gettts?lan=en&text=test&spd=3&source=web',
      value: 'test'
    },
    {
      name: '英',
      ttsURI: 'https://fanyi.baidu.com/gettts?lan=en-GB&text=test&spd=3&source=web',
      value: 'test'
    }
  ],
  // 单词的详细释义,翻译英文单词时才可能有
  dict: ['n. 试验;测验;考验;化验', 'vt. 测验;考验;考查;勘探', 'vi. 受试验;受测验;受考验;测得结果' ],
  // 一般翻译结果,数组里的每一项是一个段落的翻译
  result: ['测试']
}

注意:translation.js 中所有的语种格式都以谷歌翻译支持的语种为准。

检测语种

检测一段文本的语种可以使用 detect() 方法:

google.detect('test').then(lang => {
  console.log(lang) // => 'en'
})

注意:建议一直使用谷歌翻译检测语种,因为它支持的语种是最多的,其他接口可能不支持你所检测的文本的语种。

获取文本的语音朗读地址

使用 audio() 方法可以获取到文本的语音朗读地址:

google.audio('test').then(uri => {
  console.log(uri) // => 'http://tts.google.cn/.......'
})

在浏览器端,你可以使用 <audio> 播放这段语音,给用户提供朗读功能。

注意:谷歌翻译的语音朗读地址只能在 Chrome 扩展 / 应用中的 <audio> 里直接引用,在普通网页中引用时会报 404 错误,见 #20

你可以使用 from 参数指定文本的语种,这样会跳过检测语种的步骤(通常是一次 HTTP 请求)。

另外,百度翻译支持英标与美标读音:

// 获取美式读音
baidu.audio({
  text: 'test',
  from: 'en'
})

// 获取英式读音
baidu.audio({
  text: 'test',
  from: 'en-GB'
})

源语种与目标语种

translate() 方法支持 fromto 属性,用于指定源语种与目标语种:

// 将 'test' 从英语翻译至中文
google.translate({
  text: 'test',
  from: 'en',
  to: 'zh-CN'
})

一般情况下,你不需要设置 from,接口会为你自动检测,但还是建议尽量声明 from 以跳过自动检测语种的步骤。

使用谷歌国际翻译接口

默认情况下,translation.js 从 translate.google.cn 获取翻译结果、语种检测及语音地址,但如果你的运行环境支持,你也可以从 translate.google.com 获取数据:

google.translate({
  text: 'test',
  com: true // 这一设置仅对谷歌翻译生效
})

google.detect({
  text: 'test',
  com: true
})

google.audio({
  text: 'test',
  com: true
})

错误处理

每一个方法都可能抛出错误,抛出的错误是一个 Error 对象,你可以检查它的 code 属性判断错误原因:

google.translate('test').catch(error => {
  console.log(error.code)
})

code 可能有下面几个值:

NETWORK_ERROR - 网络错误,可能是运行环境没有网络连接造成的
API_SERVER_ERROR - 翻译接口返回了错误的数据
UNSUPPORTED_LANG - 接口不支持的语种
NETWORK_TIMEOUT - 查询接口时超时了

在 Chrome 扩展 / 应用中使用

1. 声明网络权限

最简单的方式就是申请 <all_urls> 权限:

{
  "permissions": ["<all_urls>"]
}

或者,你至少需要申请这些访问权限:

{
  "permissions": [
    // 百度翻译的接口
    "https://fanyi.baidu.com/langdetect",
    "https://fanyi.baidu.com/v2transapi",
    // 谷歌(中国)翻译的接口
    "https://translate.google.cn/",
    "https://translate.google.cn/translate_a/single",
    // 如果你需要使用谷歌国际翻译接口则添加下面两项
    "https://translate.google.com/",
    "https://translate.google.com/translate_a/single",
    // 有道翻译的接口
    "http://fanyi.youdao.com/translate_o"
  ]
}

2. 给有道翻译接口添加 Referer 请求头

有道翻译接口会验证 Referer 请求头判断对接口的访问是否来自网页,由于浏览器不允许 XMLHTTPRequest 对象设置 Referer 请求头,所以这一步只能在扩展程序里做。

你需要申请 webRequestwebRequestBlocking 权限,然后在你的后台页面中引用这个模块:

import 'translation.js/chrome-youdao'

或者直接将 chrome-youdao.js 复制到你的项目中并引用。

注意:一旦你声明了 webRequest 权限,你的扩展程序就无法运行在事件页面模式下了,这会让你的扩展常驻后台并持续占用系统资源。

许可

MIT