开发谷歌浏览器插件(原创)

今天早上打开博客园.看到一文章"开发chrome扩展程序"
自己看看,也还很简单,就自己动手写一个翻译插件

来看看效果

以前用谷歌的翻译接口做了一个翻译功能的网页http://liuju150.cacacoo.com

所以我就打算把这个功能做成一个谷歌浏览器的插件
这个翻译功能就一个页而.代码也很简单

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文件

文件内容

{ 
  "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
他就会自己载入我们的插件,