文档章节

带你制作百词斩单词表读写插件

白志华
 白志华
发布于 2015/10/18 10:57
字数 1105
阅读 15
收藏 0
点赞 0
评论 0

       上篇博文简单的介绍了一下Chrome插件,今天就与大家分享一下我做的这款有实际意义的插件吧。


       做这款插件主要是用百词斩网站进行单词学习时,遇到的一点点闹心事儿。在单词表中不能听发音,也不能练习拼写,所以才忍无可忍的做了这么一款插件。自我感觉还是很不错的。


      先来看看效果吧:


(原网站格式)


(安装插件后,多了一个按钮)


(点击change model后的效果,可显隐单词,可听发音,可检测拼写,看动画效果


       做这个插件,主要应用了content script与页面进行交互的。manifest.json内容如下:

{
    "name": "百词斩测试插件",
    "version": "1.0.0.0",
    "manifest_version": 2,
    "background": {
      "page": "background.html"
    },
    "permissions": [
      "http://*/"
    ],
    "icons": {"16":"images/icon_16.png","128":"images/icon_128.png"},
    "description": "百词斩测试插件,信息技术提高班 八期 龙轩出品",
    "content_scripts": [{
      "all_frames": true,
      "matches": ["http://www.baicizhan.com/user/words/list*"],
      "js": ["js/jquery-1.7.2.min.js","js/content_script.js","js/background.js"]
    }]
}

       最关键的就是content_script节点,其中所有的功能都是用js在后台完成的。而matches则是设置匹配模式,规定遇到哪些页面会自动执行代码。其他的就比较简单了,直接写jquery命令即可,如修改页面宽度:

//修改css样式
function csschange(){
  $(".user-word-list-block").css("width","1000px");
  $(".w950").css("margin-left","175px");
}

       其中有点难度的就是往页面注入js代码,我用jquery尝试了N多次,都不能成功,插进去的js都是文本状态,不能执行。终于使用原生的js操作成功了,代码如下:

function fun1(){//....}
function fun2(){//....}

//将js代码加入到页面的head节点中
function addscript(prefix,f,suffix){
  var script = document.createElement("script");
  script.type="text/javascript";
  script.innerHTML=prefix+eval(f)+suffix; 
  document.head.appendChild(script);
}

//注入fun1函数
addscript("",fun1,"");

//注入fun2函数,并自启动
addscript("(",fun2,")();");

       当然也直接设置控件的事件为function的对象,当然也需要用原生js写:

function fun1(){//...}

//往指定节点中添加a标签,并设置onclick对象
function addLable_A(name, fun,node) {
  var a = document.createElement("a");
  a.innerText = name;
  a.href="#";
  a.onclick = fun;
  node.appendChild(a);
}

//向class为btn-start-review的第一个元素中插入a标签,并设定onclick事件
addLable_A("Change Model",fun1,document.getElementsByClassName("btn-start-review")[0])

       添加这些都是小事儿,主要是分析单词发音的网址。由于手头没有可用的http抓包分析工具,所以点击了n多次,然后用谷歌的开发工具挨个分析请求,并通过n多实验,终于可以拿到所有的单词详细记录,包括解释、音标、例句、例句中单词信息、图片以及单词和句子的音频地址。但是都拿到的话会花费很长时间。不过看到单词发音是有规律的,所以只做了发音的链接。音频地址规则为:

http://baicizhan0.qiniudn.com/word_audios/+单词+.mp3

       音频地址可以拼出来,但是却没有一个可以播放的,在网上找了一些代码,却发现Chrome上不能播放,但是ie就没有问题(提示有activex控件,可能需要media player才行)。但是百词斩本身在chrome上是可以播放的,所以经过几番周折,终于分析出它自己写了一个soundmanager来完成播放操作,我直接把newsoundmanager的方法那过来直接加载进来就可以用了,调用create创建,play播放,destroy销毁。代码如下:

//生成音乐播放器
function t() {
    1 != window.isSoundManagerLoading && 1 != window.isSoundManagerLoaded && (window.isSoundManagerLoading = !0, window.SM2_DEFER = !0, $.cachedScript("http://assets1.baicizhan.com/pack/soundmanager2-nodebug-jsmin.js").done(function() {
        window.soundManager = new SoundManager;
        var t = {url: "/sound_manager/",debugMode: !1,debugFlash: !1,useFlashBlock: !1,useHighPerformance: !0,noSWFCache: !0,onready: function() {
                window.isSoundManagerLoaded = !0, window.isSoundManagerLoading = !1
            }};
        navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad)/) && (t.preferFlash = !1), soundManager.setup(t), soundManager.beginDelayedInit()
    }))
}

//播放单词读音
function wordvoiceplay(field){

    var file="http://baicizhan0.qiniudn.com/word_audios/"+field+".mp3";
  //创建音乐播放
  soundManager.createSound({id: 'word-audio-'+field,url:file,autoPlay: !1,autoLoad: !1}).play();
  
  //设置1秒后自动销毁音频对象
  setTimeout(function(){soundManager.destroySound('word-audio'+field);},1000);
}

       在制作的过程中,主要遇到了这么几个小问题,主要借鉴了自称非官方的文档360chrome插件开发文档。也参照了一些例子,感觉很不错。去这里可以下载到。


       做出来以后,发现插件的确很不错,可以自由扩展,属于本地个性化设计,值得学习一下。


版权声明:本文为博主原创文章,未经博主允许不得转载。

© 著作权归作者所有

共有 人打赏支持
白志华
粉丝 29
博文 260
码字总数 57524
作品 0
长沙
程序员
如何选择背单词应用?

理想中的背单词应用如下 首先请参考知乎上青格乐的答案 链接:https://www.zhihu.com/question/26649929 来源:知乎 作者:青格乐 著作权归作者所有。商业转载请联系作者获得授权,非商业转载...

很小的小小鱼儿 ⋅ 2016/03/08 ⋅ 0

百词斩Java程序员面试11个问题,你会几个?2018-04-10

近日,我们在w3cschool app开发者头条上,可以看到百词斩Java程序员面经。 在分享百词斩Java面经前,w3cschool特别给程序员小伙伴们带来一些Java学习干货: 0、学习Java必备的3大神器 如果你...

W3Cschool ⋅ 04/10 ⋅ 0

怎样背单词才算正确的姿势?

1. 一个单词你背了8遍,还是没记住,说明你是正常人,请坚信重复的力量。联想法、谐音法、记忆宫殿法、词根词缀法,作用都是有限的,不能代替多次重复,用大量阅读的方式来增加词汇量其实也是...

很小的小小鱼儿 ⋅ 2016/03/08 ⋅ 0

【12月1日-12月2日】百词斩专场招聘

成都IT内推圈是由IT行业老兵组建的民间组织,我们希望能为广大IT同仁提供力所能及的帮助,我们不仅提供靠谱的职位,我们更是有温度的圈子!为了帮助更多的朋友寻找到靠谱的内推职位,老农在此...

bjweimengshu ⋅ 2017/11/25 ⋅ 0

关于如何提高程序员工作能力的一些想法

引言:最近一直在思考一个问题,就是工作这么多年了,到底怎么样才能更好的提高自己的工作能力呢?这是一个综合性的问题,昨日也和前同事老高有过一次简单的交流,他得出的结论是:业务+技术...

landy8530 ⋅ 2017/11/14 ⋅ 0

《Neural Response Generation with Dynamic Vocabularies》阅读笔记

标题:《Neural Response Generation with Dynamic Vocabularies》 论文来源:AAAI 2018 原文链接:原文链接 声明:转载请注明出处:学习ML的皮皮虾-知乎专栏 Introduction 近年来,开放领域...

不读不读不读 ⋅ 2017/12/14 ⋅ 0

爬取豆瓣电影短评做中文分词与数据分析

中国电影最近几年突飞猛进,越来越多的人走进电影院了,各个大盘影片轻轻松松就能突破几十亿票房,但是随着电影消费的增加,大家对电影质量和制作水平的要求也提高了很多,想要继续斩获高票房...

华天清 ⋅ 05/28 ⋅ 0

coreseek索引的词项的列表

--buildstops <outputfile.text> <N> 像建立索引一样扫描索引对应的数据源,产生一个最终会被加入索引的词项的列表。换种说法,产生一个用这个索引可以检索的词项的列表。注意,这个选项使i...

lg2045 ⋅ 2013/03/12 ⋅ 0

盘点那些让用户玩起来的交互方式

来源:极客公园 手机已经成了我们生活中不可分割的一部分,手机应用也在扮演着越来越重要的角色。它们或者帮我们打发无聊时间,或者帮助我们紧密联系远方的朋友,抑或对学习知识、获取资讯有...

⋅ 2013/05/06 ⋅ 0

为coreseek添加mmseg分词

由于在工作中遇到了林书豪这个词,原来的分词库里面没有就找了下文档,自己整理了一份,以交流备忘。 1.准备好需要添加的词表,一般都是每行一词,注意要保存为utf-8; 例如: -- 林书豪 --...

王一丁z ⋅ 2013/09/01 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 35分钟前 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 1

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

CentOS开机启动subversion

建立自启动脚本: vim /etc/init.d/subversion 输入如下内容: #!/bin/bash## subversion startup script for the server## chkconfig: 2345 90 10# description: start the subve......

随风而飘 ⋅ 昨天 ⋅ 0

版本控制工具

CSV , SVN , GIT ,VSS

颖伙虫 ⋅ 昨天 ⋅ 0

【2018.06.19学习笔记】【linux高级知识 13.1-13.3】

13.1 设置更改root密码 13.2 连接mysql 13.3 mysql常用命令

lgsxp ⋅ 昨天 ⋅ 0

LVM

LVM: 硬盘划分分区成物理卷->物理卷组成卷组->卷组划分逻辑分区。 1.磁盘分区: fdisk /dev/sdb 划分几个主分区 输入t更改每个分区类型为8e(LVM) 使用partprobe生成分区的文件:如/dev/sd...

ZHENG-JY ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部