Google Chrome 插件开发

简述

Google Chrome插件依托后台执行和使用方便等优势,在使用的当的情况下可以极大提高工作效率,这里记录下一个简单的插件开发过程。

相关文档地址

Google官方提供的文档地址,需翻墙
https://developer.chrome.com/extensions
360翻译后的文档地址
http://open.chrome.360.cn/extension_dev/overview.html

开始

首先每个插件都必须包含下面的文件

  • 一个manifest文件
  • 一个或多个html文件(除非这个应用是一个皮肤)
  • 可选的一个或多个javascript文件
  • 可选的任何需要的其他文件,例如图片

在开发应用(扩展)时,需要把这些文件都放到同一个目录下。发布应用(扩展)时,这个目录全部打包到一个应用(扩展)名是.crx的压缩文件中。如果使用Chrome Developer Dashboard,上传应用(扩展),可以自动生成.crx文件。

以一个简单的翻译插件为例,需要的文件有

  • background.js
  • icon.png
  • jquery.min.js
  • mainfest.json
  • popup.html
  • popup.js

mainfest.json文件是整个插件的配置文件,可以看成是入口文件,大致需要配置的参数有插件名称,版本,需要的权限列表,由于安全问题,一些特殊操作需要先声明对应的权限才可使用,比如获得粘贴板内容,调用通知等,权限列表在开发过程一定要留意,如果一个操作始终无法生效,就需要检查下是否赋予了相应的权限。

mainfest.json文件内容如下:

{
  "manifest_version": 1,
  "name": "Google-translate",
  "description": "Google",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "permissions": [
    "activeTab",
    "notifications",
    "tabs",
    "contextMenus",
    "clipboardRead",
    "clipboardWrite",
    "http://www.wwjie.cn/",
    "http://translate.google.cn/"
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

browser_action”参数配置的是显示于浏览器右上角时的图标和需要加载的html页面,页面的宽度会自动设置,也可以在html页面内定义宽度,方式与传统的CSS+DIV通用。点击图标后将会加载并弹出popup.html页面,popup.html页面内也可以加载其他样式文件或js文件,popup.html文件内容如下:

<!doctype html>
<html>
<head>
    <title>Google翻译</title>
    <script src="popup.js"></script>
    <script src="jquery.min.js"></script>
    <style>
        body {
            min-width: 300px;
            max-width: 800px;
            min-height: 160px;
        }

        #data {
            width: 98%;
            height: 100px;
        }

        button {
            width: 100%;
            font-size: 14px;
            padding: 2px 0;
            cursor: pointer;
        }

        #res {
            font-weight: bold;
            margin-top: 10px;
            word-wrap: break-word;
            word-break: normal;
            word-break: break-all;
        }
    </style>
</head>
<body>
<textarea id="data"></textarea>
<button id="button">提交</button>
<div id="res">
</div>
</body>
</html>

这里导入了popup.js与jquery.min.js,popup.js负责获取翻译后的数据等操作,内容如下:

//加载时执行
document.addEventListener('DOMContentLoaded', function () {
    $(function () {
        //定位光标
        $("#data").focus();
        //粘贴
        document.execCommand('paste');

        //如果剪切板存在数据自动搜索
        if ($("#data").val()) {
            getGoogleRes($("#data").val())
        }
        //如果检测到回车自动搜索
        $("#data").keyup(function () {
            if (event.keyCode == 13) {
                getGoogleRes($("#data").val())
            }
        });

        //如果失去焦点自动搜索
        $("#data").blur(function () {
            getGoogleRes($("#data").val())
        });


        $('#button').click(function () {
            //获取原始数据
            var data = $("#data").val();
            getGoogleRes(data);
        })
    })
});


/**
 *返回翻译结果
 * @param data //需要翻译的数据
 */
function getGoogleRes(data) {


    if (escape(data).indexOf("%u") != -1)
        url = 'http://translate.google.cn/translate_a/single?client=gtx&sl=auto&tl=en&hl=zh-CN&dt=t&dt=bd&dj=1&source=icon&q=';  //中文->英文
    //alert("不能含有汉字");
    else if (data.match(/\D/) != null) {
        url = 'http://translate.google.cn/translate_a/single?client=gtx&sl=auto&tl=zh-CN&hl=zh-CN&dt=t&dt=bd&dj=1&source=icon&q=';  //英文->中文
        //alert("不能含有字母");
    } else {
        url = 'http://translate.google.cn/translate_a/single?client=gtx&sl=auto&tl=zh-CN&hl=zh-CN&dt=t&dt=bd&dj=1&source=icon&q=';  //英文->中文
    }
    
    $.ajax({
        type: "GET",
        url: url + encodeURIComponent(data),
        dataType: 'json',
        success: function (json_txt) {
            var res = '';
            $(json_txt['sentences']).each(function (k, v) {
                if (v) {
                    res += "<p>" + v['trans'] + "</p>";
                }
            });
            $("#res").html(res);
        },
        error: function (e) {
            // console.log(e);
        }
    });
}

 

permissions”参数配置的就是权限列表了,如果是一个http地址则代表需要获取数据的域名,所有需要获取数据的地址都需要在这里声明,测试发现域名的最后的一个”/”必须要保留,不然无法获取数据。
background”参数配置的是一个后台执行脚本,如果配置这个脚本将在加载脚本后一直运行于后台,这里添加了一个邮件上下文菜单,脚本内容如下:

//添加右键上下文菜单
chrome.contextMenus.create({"title": "翻译当前页面(Google)", "onclick": mclick})

function mclick(info, tab) {
    window.open('http://translate.google.com.hk/translate?act=url&hl=zh-CN&ie=UTF8&prev=_t&sl=en&tl=zh-CN&u=' + tab.url)
}

加载插件

完成插件开发后通过设置->扩展管理->加载正在开发的扩展程序… 选择项目文件夹即可载入插件查看效果:

4)6K}3}F2IF`AU8[QI5JZLS

 

右击后上下文菜单:

{00(CC`W36MS7B47$KZ986G

 

附件

translate-chrome.zip