本文共 3643 字，大约阅读时间需要 12 分钟。

做为一名程序员，难免要和各种英文文档打交道。然而大部分程序员的英文水平，只能用一个字来形容，那就是烂。我深知自己英语水平低下，需要一款翻译插件来治疗一下。网上的翻译插件有很多，但是这里是自己来定制一款属于自己的chrome翻译插件。

1.了解chrome插件开发

不了解的同学可以先看看下面的资料

2.插件的结构

当你了解了chrome基本开发了，下面就这就直接撸代码了。插件的目录结构

2.1 manifest.json

这是一个Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。其中，manifest_version、name、version3个是必不可少的，description和icons是推荐的。

{
       "name": "自定义翻译插件",    "version": "1.0",    "description": "百度翻译插件简化版",    //图标信息    "icons": {
           "16": "imgs/icon16.png",        "32": "imgs/icon32.png",        "48": "imgs/icon48.png",        "128": "imgs/icon128.png"    },    "manifest_version": 2,    //拥有的权限    "permissions": [ "*://*/*", "activeTab", "tabs", "contextMenus", "webRequest", "webRequestBlocking", "storage" ],    //浏览器右上角插件设置，browser_action、page_action、app必须三选一    "browser_action": {
           "default_icon": "imgs/icon32.png",        "default_popup": "popup.html"    },    //会一直常驻的后台JS或后台页面    "background": {
           "page": "background.html"     },    // 需要注入到目标页面的JS    "content_scripts": [        {
               "js": [                "js/lib/jquery-1.11.3.min.js",//context.js需要用到jq所以这里也把jq注入到目标页面中                "js/context.js"            ],            //注入的页面            "matches": [                "https://*/*",                "http://*/*"            ],            "run_at": "document_end"        }    ],    //普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的    "web_accessible_resources": [ "imgs/*.png", "imgs/*.gif" ]}

2.2 background.html

对应manifest.json background配置，是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。

有于background.js需要用到jquery和md5所以把它们引入进来。background.js 代码如下

这个代码就是注册了一个chrome插件的一个onRequest监听器,当插件的background监听到请求时就会调用下面的代码，这里会发起一个ajax请求（请求的是百度翻译的api,可以去百度的翻译插件中找到^_），获取到返回数据后，将data数据回调出去

chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
       console.log('request', request);    console.log('sender', sender);    if (request.action == 'trans') {
    //请求的action为trans时       ....        $.ajax({
               url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',            method: 'GET',            data: {
                   ...            },            asyne: true        }).done(function (data) {
               //调用请求着的回调方法，将数据返回回去            sendResponse({
                   data: data            });        });    }else {
           //todo    }});

2.3 popup.html

这页面就是我们在manifest.json配置的browser_action页面，点击browser_action或者page_action图标时打开的一个小窗口网页，焦点离开网页就立即关闭，一般用来做一些临时性的交互。

这个插件的这个页面很简单，一个按钮，点击后翻译。

...    
输入需要翻译的
    
   
    

对应的事件逻辑在popup.js中,主要就是如下逻辑

//1.获取btnTrans按钮var btnBuildTest = document.getElementById("btnTrans");//2.绑定点击事件，发送请求btnBuildTest.onclick = function () {
       var word = document.getElementById("query").value    if(word){
           //3.先插件后台 background 发起其一个请求，background接收到请求后会返回数据        chrome.extension.sendRequest({
               action: "trans",            word: word        },        function(f) {
             if(f.data&&f.data.trans_result){
               //4.将翻译结果显示在result中            document.getElementById("result").value = f.data.trans_result[0].dst          }        });    }}

2.4 context.js

这个就是要注入到我们需要应用到页面上的js脚本，对应mainset.js 中的 content_scripts

所谓，其实就是Chrome插件中向页面注入脚本的一种形式（虽然名为script，其实还可以包括css的），借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS（如果需要动态注入，可以参考下文），最常见的比如：广告屏蔽、页面CSS定制，等等。

这个脚本在我们需要注入的目标页面打开时，会自动注入

主要有如下功能

1.注册鼠标弹起事件，获取划词内容

2.动态创建翻译按钮，注册点击事件

3.点击发球翻译请求，动态创建翻译结果页面

具体效果如下

3.插件运行流程图

源码地址

转载地址：http://lzmlf.baihongyu.com/