开发谷歌浏览器翻译插件 - jack_Meng
今天早上打开博客园.看到一文章”开发chrome扩展程序“
自己看看,也还很简单,就自己动手写一个翻译插件
来看看效果
以前用谷歌的翻译接口做了一个翻译功能的网页http://liuju150.cacacoo.com
所以我就打算把这个功能做成一个谷歌浏览器的插件
这个翻译功能就一个页而.代码也很简单
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>翻译</title>
<style type="text/css">
#MainTable{ width:100%;
text-align:center;
}</style>
<script type="text/javascript" src="http://www.google.com/jsapi?v=1&key=ABQIAAAACqGEg_EWjzyatp5DcvOejRR4W90b60fHZvOCS2noQmQiRb84KxQixoel7iEIiOVRigOQjXi2AyU3yQ"></script>
<script language="javascript" type="text/javascript">
google.load("language", "1");
function BeginTranslate(isTxtTranslateSourceKeyUp) {
var _txtTranslateSource = document.getElementById("txtTranslateSource");
var _txtTranslateReturn = document.getElementById("txtTranslateReturn");
//为空不翻译
if (isTxtTranslateSourceKeyUp == true && _txtTranslateSource.value == "") {
_txtTranslateReturn.value = "";
return;
} else if (isTxtTranslateSourceKeyUp == false && _txtTranslateReturn.value == "") {
_txtTranslateSource.value = "";
return;
}
var OldLanguage = document.getElementById("SelectLanguageOld").value;
var NewLanguage = document.getElementById("SelectLanguageNew").value;
if (isTxtTranslateSourceKeyUp == false) {
var _Temp = OldLanguage;
OldLanguage = NewLanguage;
NewLanguage = _Temp;
}
var _text = "";
if (isTxtTranslateSourceKeyUp == true) {
_text = _txtTranslateSource.value;
} else {
_text = _txtTranslateReturn.value;
}
//检测是哪种语言
if (OldLanguage == "auto") {
google.language.detect(_text, function (res) {
if (!res.error) {
OldLanguage = res.language;
if (isTxtTranslateSourceKeyUp == true) {
document.getElementById("SelectLanguageOld").value = res.language;
} else {
document.getElementById("SelectLanguageNew").value = res.language;
}
}
});
}
//要翻译成什么语言
//此语言要明确,如果是自动检测的话,就自动换在中文
if (NewLanguage == "auto") {
NewLanguage = "zh-CN";
if (isTxtTranslateSourceKeyUp == true) {
document.getElementById("SelectLanguageOld").value = NewLanguage;
} else {
document.getElementById("SelectLanguageNew").value = NewLanguage;
}
}
//相同判断
if (OldLanguage == NewLanguage) {
if (isTxtTranslateSourceKeyUp == true) {
_txtTranslateReturn.value = "请选择要翻译为什么语言";
} else {
_txtTranslateSource.value = "请选择要翻译为什么语言";
}
return;
}
//是否支持此种语言的翻译
if (google.language.isTranslatable(NewLanguage) == false) {
if (isTxtTranslateSourceKeyUp == true) {
_txtTranslateReturn.value = "不支持此种语言的翻译";
} else {
_txtTranslateSource.value = "不支持此种语言的翻译";
}
return;
}
//开始翻译
google.language.translate({ "text": _text, "type": google.language.ContentType["TEXT"] }, OldLanguage, NewLanguage, function (result) {
if (!result.error) {
var ReturnStr = result.translation;
if (isTxtTranslateSourceKeyUp == true) {
_txtTranslateReturn.value = ReturnStr;
} else {
_txtTranslateSource.value = ReturnStr;
}
}
});
}
google.setOnLoadCallback(function () { });
</script>
</head>
<body>
<div>
<table id="MainTable">
<tbody>
<tr>
<td align="right">
<select id="SelectLanguageOld" onchange="BeginTranslate(false)">
<option value="auto">检测语言</option>
<option value="sq">阿尔巴尼亚语</option>
<option value="ar">阿拉伯语</option>
<option value="az">阿塞拜疆语</option>
<option value="ga">爱尔兰语</option>
<option value="et">爱沙尼亚语</option>
<option value="be">白俄罗斯语</option>
<option value="bg">保加利亚语</option>
<option value="is">冰岛语</option>
<option value="pl">波兰语</option>
<option value="fa">波斯语</option>
<option value="af">布尔文(南非荷兰语)</option>
<option value="da">丹麦语</option>
<option value="de">德语</option>
<option value="ru">俄语</option>
<option value="fr">法语</option>
<option value="tl">菲律宾语</option>
<option value="fi">芬兰语</option>
<option value="ka">格鲁吉亚语</option>
<option value="ht">海地克里奥尔语</option>
<option value="ko">韩语</option>
<option value="nl">荷兰语</option>
<option value="gl">加利西亚语</option>
<option value="ca">加泰罗尼亚语</option>
<option value="cs">捷克语</option>
<option value="hr">克罗地亚语</option>
<option value="lv">拉脱维亚语</option>
<option value="lt">立陶宛语</option>
<option value="ro">罗马尼亚语</option>
<option value="mt">马耳他语</option>
<option value="ms">马来语</option>
<option value="mk">马其顿语</option>
<option value="no">挪威语</option>
<option value="pt">葡萄牙语</option>
<option value="ja">日语</option>
<option value="sv">瑞典语</option>
<option value="sr">塞尔维亚语</option>
<option value="sk">斯洛伐克语</option>
<option value="sl">斯洛文尼亚语</option>
<option value="sw">斯瓦希里语</option>
<option value="th">泰语</option>
<option value="tr">土耳其语</option>
<option value="cy">威尔士语</option>
<option value="uk">乌克兰语</option>
<option value="eu">西班牙的巴斯克语</option>
<option value="es">西班牙语</option>
<option value="iw">希伯来语</option>
<option value="el">希腊语</option>
<option value="hu">匈牙利语</option>
<option value="hy">亚美尼亚语</option>
<option value="it">意大利语</option>
<option value="yi">意第绪语</option>
<option value="hi">印地语</option>
<option value="ur">印度乌尔都语</option>
<option value="id">印尼语</option>
<option value="en">英语</option>
<option value="vi">越南语</option>
<option value="zh-CN" selected="selected">中文</option>
</select>
</td>
<td></td>
<td align="left">
<select id="SelectLanguageNew" onchange="BeginTranslate(true)">
<option value="auto">检测语言</option>
<option value="sq">阿尔巴尼亚语</option>
<option value="ar">阿拉伯语</option>
<option value="az">阿塞拜疆语</option>
<option value="ga">爱尔兰语</option>
<option value="et">爱沙尼亚语</option>
<option value="be">白俄罗斯语</option>
<option value="bg">保加利亚语</option>
<option value="is">冰岛语</option>
<option value="pl">波兰语</option>
<option value="fa">波斯语</option>
<option value="af">布尔文(南非荷兰语)</option>
<option value="da">丹麦语</option>
<option value="de">德语</option>
<option value="ru">俄语</option>
<option value="fr">法语</option>
<option value="tl">菲律宾语</option>
<option value="fi">芬兰语</option>
<option value="ka">格鲁吉亚语</option>
<option value="ht">海地克里奥尔语</option>
<option value="ko">韩语</option>
<option value="nl">荷兰语</option>
<option value="gl">加利西亚语</option>
<option value="ca">加泰罗尼亚语</option>
<option value="cs">捷克语</option>
<option value="hr">克罗地亚语</option>
<option value="lv">拉脱维亚语</option>
<option value="lt">立陶宛语</option>
<option value="ro">罗马尼亚语</option>
<option value="mt">马耳他语</option>
<option value="ms">马来语</option>
<option value="mk">马其顿语</option>
<option value="no">挪威语</option>
<option value="pt">葡萄牙语</option>
<option value="ja">日语</option>
<option value="sv">瑞典语</option>
<option value="sr">塞尔维亚语</option>
<option value="sk">斯洛伐克语</option>
<option value="sl">斯洛文尼亚语</option>
<option value="sw">斯瓦希里语</option>
<option value="th">泰语</option>
<option value="tr">土耳其语</option>
<option value="cy">威尔士语</option>
<option value="uk">乌克兰语</option>
<option value="eu">西班牙的巴斯克语</option>
<option value="es">西班牙语</option>
<option value="iw">希伯来语</option>
<option value="el">希腊语</option>
<option value="hu">匈牙利语</option>
<option value="hy">亚美尼亚语</option>
<option value="it">意大利语</option>
<option value="yi">意第绪语</option>
<option value="hi">印地语</option>
<option value="ur">印度乌尔都语</option>
<option value="id">印尼语</option>
<option value="en" selected="selected">英语</option>
<option value="vi">越南语</option>
<option value="zh-TW">中文(繁体)</option>
<option value="zh-CN">中文(简体)</option>
</select>
</td>
</tr>
<tr>
<td align="right"><textarea id="txtTranslateSource" rows="8" cols="30"></textarea></td>
<td>
<button title="从左到右翻译" onclick="BeginTranslate(true)">>></button>
<br />
<br />
<button title="从右到左翻译" onclick="BeginTranslate(false)"><<</button>
</td>
<td align="left"><textarea id="txtTranslateReturn" rows="8" cols="30"></textarea></td>
</tr>
</tbody>
</table>
</div>
<script language="javascript" type="text/javascript">
var timer;
document.getElementById("txtTranslateSource").onkeyup = function () {
if (timer != null) {
clearTimeout(timer);
}
timer = setTimeout("BeginTranslate(true)", 1000);
};
document.getElementById("txtTranslateReturn").onkeyup = function () {
if (timer != null) {
clearTimeout(timer);
}
timer = setTimeout("BeginTranslate(false)", 1000);
};
</script>
</body>
</html>
|
然后看看谷歌的插件文档
在C盘下创建了一个文件夹C:\GoogleDemo
然后把那个网页放到文件夹里面index.html
然后在这个文件夹里面自己创建一个manifest.json文件
文件内容
|
1
2
3
4
5
6
7
8
9
10
11
|
{ "name": "Translation(翻译)",
"version": "1.1",
"description": "This is a translation plug-in, you can translate between many languages(这是一个翻译插件,可以在很多种语言之间相互翻译)",
"icons":{"16":"16.png","48":"48.png","128":"128.png"},
"browser_action": {
"default_icon": "16.png",
"popup": "index.html"
},
"permissions": ["http://*/","bookmarks","tabs","history"]
} |
自己做了几个PNG图标,主要是做插件在浏览器上的图标用,就是浏览器右上角看到我插件的那个图标
然后打开谷歌浏览器输入地址:chrome://extensions/
开始没有看到我这个插件的,这是我安装上去的效果,
开始的话,选择第一个按钮,就会要你选择你插件所在的文件夹,这里我们选择C:\GoogleDemo
他就会自己载入我们的插件,
然后再选择第二个按钮
第一次可以不选择第二个文件,因为第一次他会自己生成一个GoogleDemo.pem这样的文件
以后你更新了的话.就要选择了,他就知道是在这个插件上的更新,而不是一个新的插件
完成后.就可以在你的谷歌浏览器里看到这个翻译插件了
DEMO下载
出处：http://www.cnblogs.com/liuju150/archive/2010/09/28/Google_chrome_Extensions_Translation.html
版权声明：本文为mq0036原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。