分享自己做的一个浏览器插件，翻译+xpath选取

SonDanmbi

最近不知道干嘛，学习了下浏览器插件开发，做了个浏览器插件，可以选词翻译和选取标签的xpath，先上图









chrome、360浏览器等使用谷歌内核的浏览器应该都可使用

安装：进入浏览器扩展程序页面，开启开发者模式，“加载已解压的扩展程序”,选择项目文件夹即可

使用：要使用插件功能先点击插件右侧对应的开关开启，之后需要使用哪个功能同样点击开关开启即可 。

脚本并非一次性全部注入页面，而是根据开启的功能按需注入，开启项越多，注入页面的脚本越多（虽然也没多少代码，我觉得这样比较节约资源吧，但这样也容易出现不同脚本文件因为注入快慢相互调用时出现未定义的情况，目前我的解决方法是定义一个检测函数，以一定的时间间隔（0.5秒）心跳检测要执行的目标函数是否存在，检测持续时间为5秒，5秒后若还未检测到目标函数则返回）


Xpath： 模仿浏览器在开发者模式下鼠标移动到相应标签上标签被色块覆盖突出显示的的效果。鼠标移动到标签上按键‘Esc’可获取标签的Xpath，当然可以绑定更多操作， 也可自行修改脚本将更多的标签类型加入处理范围内（修改xPathScript.js中的数组tags）
//xPathScript.js 开启xpath的依赖，需在commonInject.js 后注入
//需要处理的标签添加到tags
var tags=["button","span","img","input",'div','label','a','form'];


翻译： 开启后选中内容右键菜单翻译或按键Alt_L(左alt右alt都一样)翻译，使用的有道自动翻译api 。翻译显示的结果面板颜色随机，可拖动，鼠标进入再离开后自动销毁


欢迎各位大佬使用和反馈问题

【new】速度更新：
修改了翻译面板大小自适应、可以翻译段落、句子了，欢迎各位大佬提出意见
2.zip (37.18 KB, 下载次数: 521)

2019-4-16 10:32 上传

点击文件名下载附件

翻译面板自适应大小可以自己设置，修改mdictScript.js 文件中的div_style即可，min-width:25%;max-width:60%，自适应大小的区间在25-60%之间
function addDictPanel(result) {
        //样式可能受页面css影响，可以尽量定义全一些，避免继承页面的css
        var div_style="padding:30px 20px 30px 20px;height:auto;z-index:99;position:fixed;min-width:25%;max-width:60%";

SonDanmbi

bachelor66 发表于 2019-4-15 12:00
能全页翻译吗？

刚刚修改完，附件已更新，现在可以翻译段落句子了，跟着修改了下翻译面板大小自适应

SonDanmbi

lcylcyll 发表于 2019-4-16 11:08
XPATH可不可以做一个教程或都做一个调试工具出来啊，我不会搞

目前受监视的标签有"button","span","img","input",'div','label','a','form'，如果想要监视更多标签
可以修改xPathScript.js中的数组tags，将新增的标签加入tags就行了

//xPathScript.js 开启xpath的依赖，需在commonInject.js 后注入
//需要处理的标签添加到tags
var tags=["button","span","img","input",'div','label','a','form'];

bachelor66

能全页翻译吗？                        

小涛丿

感谢分享

SonDanmbi

bachelor66 发表于 2019-4-15 12:00
能全页翻译吗？

只能翻译选中的内容，按道理来说如果选中整个页面的话应该也能翻译的，刚刚看了下返回的数据包误会了，有道api会自动断句，返回结果是都会翻译的，只是不是放在一个字段里

白衣渡江

支持一下

axljlxn

支持下，看看！

axljlxn

感谢分享！

苏文执的猫

感谢分享

jamesr2017

感谢分享