chrome插件实现简单网页实时翻译

  昨天网上冲浪看了下chrome开发文档,写个翻译小插件练手,平时看外文文档查点生词还是挺方便的。

简单介绍和实现效果

  该插件实现主要思路很简单,将content.js注入脚本进入浏览页面,利用window.getSelection()方法获取当前页面被鼠标选取的文字,之后利用chrome的api chrome.extension.sendRequest将之前获取的字符传给background,之后background中ajax调用翻译接口获取翻译结果后,利用chrome.storage.local存储后,在popup页面中进行显示。
《chrome插件实现简单网页实时翻译》

  为了方便直接使用popup进行结果的输出,也可以写一个悬浮框方便结果实时显示,将background中的结果传回content就行。

  效果展示《chrome插件实现简单网页实时翻译》

  百度翻译响应还是很快的。

content.js

  Content.js在插件中用来向当前页面注入脚本或者css样式。本文实现的插件选了对github以及其子链接有效,在插件manifest清单文件中写入content文件:

      "content_scripts": [
        { 
          "matches": ["https://github.com/*"],
          "js": ["jquery.js", "md5.js", "content.js"]
        }
      ],

  为了演示下,这里设置只有在github相关页面中才执行脚本注入,同时指定注入的js文件。
具体逻辑在content.js文件中实现:

var now = "begin select"
$(document).ready(function(){ 
    $("div").on("click", selectTrans)
})

function selectTrans(){ 
    var text = getSelect()
    var textStr = text.toString()
    // 防止因为div太多多次调用
    if(textStr != now && textStr!=""){ 
        console.log(text.toString())
        now = textStr
        sendRequestToPopup(textStr)
    }   
}

function getSelect(){ 
    var text = window.getSelection()
    if(text == null){ 
        return "blank"
    }
    return text
}

  代码首先对所有的div块设置一个click的回调函数,这样无论页面上哪些文字被选中都能被获取到。
在getSelect()函数中,利用window.getSelection()获取选中信息,要获取文本的话,需要调用其toString()方法,将字符串获取。为了防止div太多,点到别处时会获取空字符串或重复字符串,在selectTrans函数中进行判断,判断成功后传递信息。

function sendRequestToPopup(textStr){ 
    chrome.extension.sendRequest({ 'text': textStr}, function(response){ 
        console.log(response); // 将返回信息打印到控制台里
    });
}

  调用chrome.extension库中的sendRequest方法,将包含数据的对象传递出去,同时设置回调函数,将返回信息在控制台中输出。该方法可同时将request传递给popup和background,只要它们接收即可。

background.js

  因为content security policy(CPS)安全性的规定,不能在https的页面中执行对于http的访问,所以利用content传递数据,在background中进行ajax的接口访问。
  Manifest中设置background的脚本文件,这边只需要进行后台数据处理,所以不用html文件:

      "background":{ 
        "scripts": ["jquery.js", "md5.js", "background.js"]
      },

  首先是利用onRequest监听传送过来的数据,处理完后存储到chrome的local中:

chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) { 
        textNow = request.text
        sendResponse("send success:" + textNow);
        console.log(textNow)
        trans(textNow)
        // afterTrans = textNow
        chrome.storage.local.set(
            { 
                former_result: textNow,
                translate_result: afterTrans
            },function(){ 
                console.log("store result:"+afterTrans)
            }
        )
    }
)

  其中trans函数调用了ajax进行翻译信息获取,翻译接口使用的是百度翻译,返回一个对象信息,处理下获取翻译结果就行了。调用接口需要对应应用的id和key,开发者平台申请即可。

function trans(text){ 
    // 调用百度翻译接口
    var query = text.toString()
    var from = "auto"
    var to = "zh"
    var appid = "xxx" //你的id
    var key = "xxx" //你的key
    var salt = (new Date).getTime()//取当前时间作为随机数
    var str1 = appid + query + salt + key
    var md5_str = MD5(str1)
    $.ajax({ 
        url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
        type: 'get',
        dataType: 'json',
        data:{ 
            appid: appid,
            q: query,
            from: from,
            to: to,
            salt: salt,
            sign: md5_str
        },
        success: function(result){ 
            console.log(result)
            var res = getTranslateResult(result)
            afterTrans = res
            console.log(res)
            // setResult(res)
        }
    })
}

  MD5文件是百度翻译demo里面拿来的,直接用就行。

  需要注意的是,chrome插件不支持jsonp格式信息的获取,百度翻译示范中ajax的dataType是jsonp,这边修改为json。不然会违反csp规定,报错是:because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

popup

  Popup属于browser action的组件,因为失去焦点就会关闭页面,所以选择下一个词之后会重新加载,这时候读取对应数据显示就行了。
Manifest:

      "browser_action": { 
        "default_icon": "images/t.png",
        "default_title": "translate tool",      
        "default_popup": "test.html"        
      },

  需要注意的是,chrome插件为了安全起见,不会调用popup页面中直接使用

<link href="pop.css" type="text/css" rel="stylesheet" />
<script src="jquery.js"></script>
<script src="md5.js"></script>
<script src="popup.js"></script>

  Popup.js:

$(document).ready(function(){ 
    chrome.storage.local.get("translate_result",function(result){ 
        $("#translate_result").text(result['translate_result'])
        $(".main_screen")
    })
    chrome.storage.local.get("former_result",function(result){ 
        $("#former_result").text(result['former_result'])
    })
})

  简单在加载完毕后显示对应值即可。

总结

  看了下文档简单调用下接口熟悉了下插件,实现也比较简单,要继续做美化可以利用content的css注入来实现一个悬浮框。能注入脚本到当前页面还挺不错的,可以用来爬虫,修改页面样式等。不过因为csp的关系,很多时候要注意安全的写法,也确实需要注意安全,毕竟能直接注入脚本,不要用来历不明的插件哈。

项目已传github:https://github.com/huiluczP/translate_plug_inlink

    原文作者:回炉重造P
    原文地址: https://blog.csdn.net/qq_41733192/article/details/106087505
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞