# chromePluginTranslate

**Repository Path**: leolee18/chrome-plugin-translate

## Basic Information

- **Project Name**: chromePluginTranslate
- **Description**: chrome插件，用于快速翻译。用户选择英文，在原文右下角会有中文翻译。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-20
- **Last Updated**: 2024-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Chrome扩展，通过baidu API 翻译

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

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

![alt 效果图](img/translate.png "效果图")

## 新建配置文件 manifest.json

```js
{
  "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"]
    }
  ]
}
```

## 界面注入实现

```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

```js
// 收到翻译消息，调用百度翻译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;
}

```

## 安装

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