當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

开发谷歌浏览器翻译插件

發(fā)布時(shí)間：2023/12/31 综合教程 20 生活家

生活随笔收集整理的這篇文章主要介紹了开发谷歌浏览器翻译插件小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

今天早上打開博客園.看到一文章"開發(fā)chrome擴(kuò)展程序"
自己看看,也還很簡單,就自己動手寫一個翻譯插件

來看看效果

以前用谷歌的翻譯接口做了一個翻譯功能的網(wǎng)頁http://liuju150.cacacoo.com

所以我就打算把這個功能做成一個谷歌瀏覽器的插件
這個翻譯功能就一個頁而.代碼也很簡單

+ View Code?

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
{
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盤下創(chuàng)建了一個文件夾C:GoogleDemo

然后把那個網(wǎng)頁放到文件夾里面index.html

然后在這個文件夾里面自己創(chuàng)建一個manifest.json文件

文件內(nèi)容

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圖標(biāo),主要是做插件在瀏覽器上的圖標(biāo)用,就是瀏覽器右上角看到我插件的那個圖標(biāo)
然后打開谷歌瀏覽器輸入地址:chrome://extensions/

開始沒有看到我這個插件的,這是我安裝上去的效果,
開始的話,選擇第一個按鈕,就會要你選擇你插件所在的文件夾,這里我們選擇C:GoogleDemo
他就會自己載入我們的插件,

然后再選擇第二個按鈕

第一次可以不選擇第二個文件,因?yàn)榈谝淮嗡麜约荷梢粋€GoogleDemo.pem這樣的文件

以后你更新了的話.就要選擇了,他就知道是在這個插件上的更新,而不是一個新的插件
完成后.就可以在你的谷歌瀏覽器里看到這個翻譯插件了
DEMO下載

出處：http://www.cnblogs.com/liuju150/archive/2010/09/28/Google_chrome_Extensions_Translation.html

總結(jié)

以上是生活随笔為你收集整理的开发谷歌浏览器翻译插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：网关支付、银联代扣通道、快捷支付、银行卡
下一篇：怎么创建具有真实纹理的CG场景岩石？