开发谷歌浏览器翻译插件
今天早上打开博客园.看到一文章"开发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
关注我】。(●'◡'●)
如果,您希望更容易地发现我的新博客,不妨点击一下绿色通道的【因为,我的写作热情也离不开您的肯定与支持,感谢您的阅读,我是【Jack_孟】!
本文来自博客园,作者:jack_Meng,转载请注明原文链接:https://www.cnblogs.com/mq0036/p/8287532.html
【免责声明】本文来自源于网络,如涉及版权或侵权问题,请及时联系我们,我们将第一时间删除或更改!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
2016-01-15 Notepad++中代码格式化插件NppAStyle