将一个前端项目改写为chromo插件（二）

将一个前端项目改写为chromo插件（一）

要改编的项目是无后端完成在线翻译功能

改编后的代码在这里

因为之前的写了很多，就简单的写了。

目标

当用户打开网页后，检查网页上所有生词，翻译，并展示在popup.html中

思路

"content_scripts": [

        {
            "matches": ["<all_urls>"],
            "js": ["content/all_urls_voca.js"]
        }
    ]
复制代码

匹配所有url，每当用户打开一个url后，加载脚本，检查dom中所有有的英文单词

let vocab_text = document.body.innerText
function getVocabulariesFromText(text){
    let vocabulariesArray = text.match(/[a-zA-Z]+/g)
    vocabulariesArray = new Set(vocabulariesArray)//去重
    vocabulariesArray = [...vocabulariesArray]
    return vocabulariesArray
}
let vocabulariesArray = getVocabulariesFromText(vocab_text)
复制代码

然后通过上节介绍的API，将数组发送到background, 在这里发起翻译请求。

因为跨域请求的限制，在我原先的项目中，我是用jsonp向百度API发起请求的，但是在插件中，不受到跨域请求的限制，所以可以直接发起ajax请求。

而具体的请求逻辑我之前有写，复制粘贴即可。

然后用户每次点击小图标，就由popup.js向后台咨询翻译的结构，插入到popup.html显示即可