Chrome插件入门 - 实现360自动翻译

引子

因为百度翻译已经成了广告页了,亦发现360翻译比较清爽,所以将在线翻译的入口挪到了'http://fanyi.so.com/',使用速度还是很快的,但是360翻译的翻译功能需要人肉去点“翻译”按钮,为了优化这个反人类的设计,故有此篇Chrome插件入门。

创建插件目录

随便在磁盘找一个位置创建插件的文件目录,这里命名为'Auto360FanYi'

编写manifest.json

在'Auto360FanYi'下创建'manifest.json'文件,并填写如下内容


    {
        "manifest_version": 2,
        "name": "360翻译",
        "description": "360翻译自动触发插件",
        "version": "0.0.1",
        "icons":
        {
            "16": "icon.png",
            "48": "icon.png",
            "128": "icon.png"
        },
        "permissions":[
            "http://fanyi.so.com/"
        ],
        "content_scripts":[{
            "matches":["http://fanyi.so.com/"],
            "js":["jquery.min.js","auto.js"],
            "run_at":"document_end"
        }],
        "homepage_url": "http://fanyi.so.com/"
    }

上述的每个字段的意思可以自行查阅资料这里不再絮述

引入jQuery

因为需要使用Javascript技术,所以需要引入jQuery框架,在content_scripts下填写需要引入点js文件,上文的json中已经填充好。

编写插件逻辑

创建auto.js文件并填写以下代码内容:

    console.log("360自动翻译插件加载完成");
    //监听Textarea键盘按键抬起事件
    $("textarea").keyup(function(event) {
      clearTimeout();
      setTimeout(function(){
          console.log("keyup:" + $("textarea").val());
          window.location.href = "javascript:$('a.translate').click()";
      },500);
    });

在直接执行$('a.translate').click()无效的方式(因为是入门,所以我也不知道什么问题,有路过的大神可以指教一下),所以使用变通的方式直接将地址赋值为js的指令。

安装插件

导出的crx文件不能用!导出的crx文件不能用!导出的crx文件不能用!
可能是因为Chrome的安全机制,分享出去的插件文件不能使用,只能通过源代码的方式进行安装,要不然需要上架到Chrome Store,安装方式如下:

Chrome右侧更多按钮(三个点或者三个线)>更多工具>扩展程序
点击加载已解压的扩展程序...,选择插件源码的目录,这里选择Auto360FanYi
扩展程序中会看到插件信息,将启用复选框勾选上,回到目标网页刷新,查看效果