阅读 98

将一个前端项目改写为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显示即可