要改编的项目是无后端完成在线翻译功能
改编后的代码在这里
因为之前的写了很多,就简单的写了。
目标
当用户打开网页后,检查网页上所有生词,翻译,并展示在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显示即可