“手把手”教你开发一个多语言翻译chrome插件

多语言互译chrome插件

---

最近逛掘金看了下，前端必备技能项居然有 “chrome插件开发” ，想一想了本身的英语功力（开机自启动"有道翻译"～哈哈哈），因而，话很少说开工，整一个“翻译chrome插件”

• 功能点： 用户可选择语言翻译类型（如：中 >> 英），默认自动翻译
• 优势： 方便快捷，不再用一直开着翻译软件了
• 使用方法：1. 选中文案，右键点击便可翻译 2. 用户能够点击插件icon，选择须要翻译的语言类型

---

产品效果图

插件使用教程

• 👉(github.com/jyf15498768…)，克隆项目
• cd translate-chrome-plugins
• npm install
• npm run build
• 打开chrome扩展管理

• 若是须要本身在此插件上作修改的话，可以使用npm run build-watch进行build监听, 更新好代码后，只须要点击下图便可刷新插件

  

此时，若是你对该插件如何实现并不敢兴趣（只想用用而已）

可是我想说： 少侠！！！请留步！！！

---

开发流程

厨师所需“厨艺”：

• vue技术栈
• 少量webpack知识

开发所需“食材”：

• vue-cli3
• element-ui // 为了插件包的大小，建议按需加载～固然我只是建议😊
• vue-cli-plugin-chrome-ext包
• 官方文档：(open.chrome.360.cn/extension_d…)

1. clone项目，项目地址

2. chrome插件相关知识（通信相关）

主要如下三块： background(persistent参数：是否始终运行于chrome后台，默认true) , popup, content_script

• popup => background // popup页能直接调用background的变量和方法

  const { bgParam1, bgMethods1 }  = chrome.extension.getBackgroundPage() // 获取background页的变量(bgParam1)和方法(bgMethods1)
  复制代码

• content_script <=> background // content与background相互通信

const c2b = chrome.extension.connect({name: "c2b"}) // content页初始化一个插件port，用于通信标示
    c2b.postMessage('巴拉巴拉') // content发送“巴拉巴拉”给 background
    c2b.onMessage(res => {......}) // 监听消息
    
    chrome.extension.onConnect.addListener(port => {
        port.postMessage('收到，啦啦啦啦，回复你了') // background发送信息给content
        ......
    } ) // background页监听port是否连接
复制代码

3. 踩坑

插件跑起来以后，发现只要是element开发的项目页，都会白屏（不信，你能够把截图里的app666改回成app，便可复现）

---

舒适提醒

翻译接口调用的是：有道翻译

频繁请求可能会被限制Ip，致使翻译失败

将log里的接口地址，贴入网址栏，输入验证码便可，解除限制

---

收尾

最后，我想说，以为插件不错的～记得给点个👍👍👍加收藏。

你的点赞，是我产出的动力～～～