「手把手」教你開發一個多語言翻譯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裏的接口地址，貼入網址欄，輸入驗證碼便可，解除限制

---

收尾

最後，我想說，以爲插件不錯的～記得給點個👍👍👍加收藏。

你的點贊，是我產出的動力～～～