開發谷歌瀏覽器插件(原創)
摘要：作者自己動手寫了一個翻譯插件，讀者可以從中了解到開發chrome的插件的過程。
今天早上打開博客園.看到一文章"開發chrome擴展程序"
自己看看,也還很簡單,就自己動手寫一個翻譯插件
來看看效果
以前用谷歌的翻譯接口做了一個翻譯功能的網頁http://liuju150.cacacoo.com
所以我就打算把這個功能做成一個谷歌瀏覽器的插件
這個翻譯功能就一個頁而.代碼也很簡單
<!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文件
文件內容
{
"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這樣的文件
以后你更新了的話.就要選擇了,他就知道是在這個插件上的更新,而不是一個新的插件
完成后.就可以在你的谷歌瀏覽器里看到這個翻譯插件了
全站熱搜
留言列表
