Chrome扩展，通过baidu API 翻译

Chrome扩展，选择文本，通过baidu API 翻译到右下角

当你在网页中遇到不认识英文时，你可能会选择复制，查询翻译好几步。为了解决这个问题。我开发个chrome插件。实现，只要选择一个文本，就会在当前文本右下角显示翻译后的内容。方便快捷的“翻译成中文”。本插件基于百度翻译API开发。插件应用包版本v3。废话不说了，直接上代码。

源码下载:https://gitee.com/leolee18/chrome-plugin-translate

新建配置文件 manifest.json

{
    "name": "translate",
    "description" : "chrome translate",
    "version": "1.1",
    "manifest_version": 3,
    "action": {//如果有 action, 即在chrome toolbar 的右边添加了一个 icon
        "default_icon": {"19":"img/icon.png"},
        "default_title": "translate"
    },
    "icons":{//可定义一个或多个, 应用或主题背景的图标
        "16": "img/icon.png",
        "48": "img/icon.png"
    },
    "host_permissions": [//主机权限v3版本
        "<all_urls>"
    ],
    "background": {//后台网页,应用长时运行程序
        "service_worker": "js/background.js"
    },
    "content_scripts": [// 注入内容脚本
        {
            "matches": ["<all_urls>"],
            "js": ["js/mMd5.js","js/contentScript.js"]
        }
    ]
}

界面注入实现

//实时定位鼠标位置
document.onmousemove = function(event) {
    var mouseX = event.pageX;
    var mouseY = event.pageY;
    mMouXY.left = mouseX;
    mMouXY.top = mouseY;
};
  

// 监听鼠标点击事件，获取选中的文本
function handleSelection(e) {
    var selectedText = window.getSelection().toString();
    var lineHeight = window.getComputedStyle(e.target).getPropertyValue('line-height');
    if(selectedText){
        // 设置显示框的位置
        mRect = {...mRect,left:mMouXY.left +5,top:mMouXY.top + parseFloat(lineHeight)};
        // 发送选中的文本
        mSText = selectedText;
        setTimeout(function(){
            // 发送消息给background.js,翻译文本内容
            chrome.runtime.sendMessage({
                name: 'trans',
                content:selectedText
            });
        },100);
    }else{
            mRect = {width: 0, height: 0, top: 0,left: 0};
            mSText = '';
            setLTWH(tranDiv,mRect,mSText);
    }
}
document.addEventListener('mouseup', handleSelection);
document.addEventListener('touchend', handleSelection);
  

// 监听翻译后消息，并显示到界面上
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    if (message.name === "text") {
        var mObj = message.content[0];
        setLTWH(tranDiv,mRect,mObj.dst);
    }
});
 

// 设置显示框的位置和内容，并显示出来
function setLTWH(mDom,mObj,mText) {
    mDom.style.top = (mObj.top - mObj.height) +'px';
    mDom.style.left = mObj.left+'px';
    mDom.innerHTML = mText;
    if(mText){
        mDom.style.display = 'block';
    }else{
        mDom.style.display = 'none';
    }
}
setLTWH(tranDiv,mRect,'');
  
var tranDiv = document.createElement('div');
// 界面设计代码省略……
document.body.appendChild(tranDiv);

翻译功能，baidu 翻译API

// 收到翻译消息，调用百度翻译API
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
    if(message.name == 'trans'){
        var data = message.content;
        if(data){
            ajaxGet(data);
        }
    }
});
  
//由于v3不再支持，window、document等界在元素，所以需要使用fetch API来调用API，并返回结果。
function ajaxGet(params) {
    // 拼接百度翻译API url
    var mUrl = getTranUrl(params);
    fetch(mUrl).then((response) => response.text()).then((result) => {
        var data = JSON.parse(result);
        chrome.tabs.query({active:true,currentWindow:true},function(tabs){
            chrome.tabs.sendMessage(tabs[0].id,{name:'text',content:data.trans_result});
        });
    })
    .catch((error) => console.log("error", error));
} 
  
function getTranUrl(params) {
    var appid = '***'; //改为你的百度appid
    var my = '******'; //改为你的百度密钥
    var salt = generateRandomString(10); //随机字符串
    var q = params; //文本
    // 生成签名
    var sign = md5(appid+q+salt+my,32);
    return 'http://api.fanyi.baidu.com/api/trans/vip/translate?q='+q+'&from=en&to=zh&appid='+appid+'&salt='+salt+'&sign='+sign;
}

插件安装

1. 打开google chrome的菜单（三条线图标）
2. 点击”更多工具“ > ”扩展程序“
3. 打开开发者模式
4. 点击”加载已解压的扩展程序“，选择文件目录
5. 点击”启用“即可使用