分类
木讷技术宅

为Chrome插件加载Javascript

上一次(其实就是昨天),为了防止中华职棒官方的录播页面剧透比分,所以我写了个简单的Chrome插件,用来屏蔽比分。也写出了第一个版本。

虽然星期一是休赛日,甚至连比赛都没有,但是我还是觉得,如果把所有比赛分数都隐藏了,那如果我有时候还是想看到比分,这可怎么办啊。在过去的一天,我试过了一些方法,通过菜单来实现显示和隐藏所有比分,但是那个菜单做的很丑,而且,把所有比分都显示出来,还是有剧透的风险,所以,我决定要给每一场比赛加一个开关,用来显示当场比赛的分数。

肉壳是个前段小白,真的试了好久,才解决这个简单的问题。

首先,这个网站还在用table来制作表格,而且,也没有为比分栏设定id。如果每个比分栏没有固定id的话,就无法定位到这个比分,进而无法控制这个比分的显示或隐藏。所以,第一个要解决的问题是,为每一个比分添加一个id。我们使用JavaScript来解决这个问题。

var scores = document.getElementsByClassName("score");
for (var i = 0; i < scores.length; i++) {
    var score = scores.item(i);
    score.id = "score_" + i;
}

我们通过class找到每一个score,然后给他加一个id。

其次,我们需要给表格增加一列,用来显示开关,我们把开关放在表格最后面。

var tbl = document.getElementsByClassName('vod_table'), // table reference
tbl = tbl.item(0);

for (var i = 0; i < tbl.rows.length; i++) {
    var row = tbl.rows[i];
    if (i == 0) {
        var th = document.createElement('th');
        th.innerText = "显示/隐藏分数";
        row.appendChild(th);
    } else {
        createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i-1, 'stadium');
    }
}

然后,我们要为每一个开关,写一个function,用来把开关和分数栏对应起来。这样,在点击开关的时候,就会显示或隐藏相应的比赛分数了。

function createCell(cell, id, style) {
    cell.setAttribute('class', style);
    cell.innerHTML = "<label class=\"switch\"><input id=\"switch_" + id + "\" type=\"checkbox\"><span class=\"slider round\"></span></label>";
    var toggle = document.getElementById("switch_" + id);
    toggle.onclick = function(){toggleSwitch(id)};
}

function toggleSwitch(id) {
    var score = document.getElementById("score_" + id);
    if (document.getElementById("switch_" + id).checked) {
        score.setAttribute("style", "visibility: visible;");
    } else {
        score.setAttribute("style", "visibility: hidden;");
    }
}

这这里,开关我们用了一个checkbox,我还找来了一个css,以便让它看起来更美观。大家有兴趣可以去看看我的css文件

当然,我们要把之前写的js代码,都存放在一个文件中。最终代码的样子在这里

因为css,我们还是写在了旧的文件中,那我们刚刚写的js文件要怎么办?如何让自己的插件可以加载JavaScript?其实很简单,只要打开manifest.json,在content_scripts中加入一行"js": ["assign_ids.js"],用来加载我们刚刚创建的assign_ids.js文件就可以了。最终文件长这个样子

值得注意的一点是,在js中,在建立开关的时候,我用了一种类似hardcode的方式添加的onclick事件。这是因为Chrome插件在使用content_scripts加载js的时候,并不会一只保留js文件,所以如果只是简单的调用某个function,浏览器会找不到这个function。所以只能退而求其次的hardcode。不过我看大家好像都是这么做的,也无所谓了。

其实本来还想用这个js来替换掉比分,而不是简单的隐藏。但是发现,js会在网页加载之后才会被调用,于是有那么一个瞬间,比分是会被显示出来的。

所以这个插件的整体流程就是,默认先通过css将所有分数隐藏,等网页加载后,为每个分数添加id,并为每一行添加开关。等用户点击相应的开关时,根据开关的状态,显示或隐藏对应的比分。

未来,我会再加一个开关,用来一键显示所有比分。而且,还会为插件添加一个开关,以便用户可以关掉屏蔽比分的功能,而不需要通过后台停用整个插件。

肉壳已经为大家打包好了这个插件,大家可以直接去Github下载。

https://github.com/Rokeer/CPBLTV-Spoiler-Alert/releases

最终的网站效果如下图……终于又能看到比分咯……

看到右边的开关没?

未来,我还会继续学习开发这个插件,这两天研究一下,如何把它丢去商店里,方便大家下载……

另外,如果没有什么太大问题,我就不每次更新都为大家更新文章了。请大家关注我的Github

4月14日更新:

花了一晚上的时间把这个插件完善了一下,增加了一些功能,并发布在了Chrome Web Store中……大家可以搜索CPBLTV Spoiler Alert或访问这个链接下载使用……

v1.0.0
04/14/2020
正式版上线,并发布于Chrome扩展平台
添加开关用于显示、隐藏所有比赛分数
为插件添加菜单
用户无需停用扩展,即可在菜单中关闭此功能
为扩展添加图标
为踏浪寻星广播电台做广告
添加英文,简体中文,和繁体中文支持

分类
木讷技术宅

用Chrome插件隐藏网页信息

上回我们说到,由于疫情的原因MLB停摆了,所以现在没有MLB可以看了。好在台湾的中华职棒决定今年在没有观众(实际上是只允许季票观众入场)的情况下开赛。于是,时隔多年,肉壳再一次购买了CPBLTV,这样就可以继续看棒球比赛了。价格也比15年刚开始收费的时候便宜了一点。不过,在15年的时候,我还在国内,所以可以在每天晚上看比赛直播。但是,现在由于时差的关系,我只能看比赛录播了。想想也没有什么大问题,因为周围的朋友都很少有人在讨论中华职棒的比赛,所以也不怕剧透。这里不得不吐槽一下CPBLTV的画质,直播只有540p,录播也只有720p。没想到,都2020年了,即使在官网看比赛,画质也就是和10年前看的网络电视的画质一样……

刚才我们说到,不怕朋友剧透。但是官方剧透更可怕……随着赛季开始,肉壳打算开始收看录播比赛。但是惊人的一幕发生了,官网上赛事录播的页面上,把所有的比赛结果都列了出来……所以肉壳就被赤裸裸的剧透了。

官方剧透最可怕……

本着自己动手丰衣足食的原则,肉壳写了一个非常简单的Google Chrome的插件,用来屏蔽掉页面上的比赛分数。肉壳对前端方面没有太多了解,所以仅仅是把所有分数隐藏了起来,并没有其他特别花哨的功能。如果有需要的话,以后再说。所以今天,就来给大家讲一讲,如何写一个可以修改网页内容的Chrome插件。

首先,我们要建立一个文件,名为manifest.json。大家可以阅读Google的官方文档来进一步了解这个文件,我在这里只写出了我需要的地方。

{
  "manifest_version": 2,
 
  "name": "CPBLTV Spoiler Alert",
  "version": "0.0.1",
  "description": "Hide game results in CPBLTV website.",
 
  "content_scripts": [{
    "css": ["styles.css"],
    "matches": ["https://www.cpbltv.com/lists.php*"]
  }]
 
}

其中name,version和description是插件的名字,版本号和描述。可以自己随便定。下面content_scripts定义了插件要加载的css文件,这里我们给这个文件起名为styles.css。matches里定义了插件起作用的网页。

然后,新建我们要加载的css文件styles.css。网页中的数据,是通过一个table来显示的,好在他们对score这一栏定义了一个名为score的css element。不得不吐槽啊,都2020年了,还在用table来显示内容,而不是用div,我以为只有我这种前端小白才会用table呢……所以,很简单,我们只需要将score的元素全都隐藏起来就好了。下面是styles.css文件的内容。

.vod_table .score{
	visibility: hidden;
}

至此,这个简单的插件就写好了。至于安装调试,首先将刚才写的两个文件放在同一个文件夹下,再将文件夹拖入Chrome的插件页面,chrome://extensions/,就安装完成了。

终于不怕官方剧透了……

这样我就对比分一无所知了……哈哈哈!

另外,我将代码放在了Github上,并且会持续更新,有兴趣的朋友可以下载来用……

https://github.com/Rokeer/CPBLTV-Spoiler-Alert

分类
记日本

2020年的几大遗憾事件

这是一篇被分在记日本分类下的文章,这个分类主要用于记录自己的生活,看了一下,上一次在记日本分类下的文章居然已经是2012年年底发布的iPad mini的开箱文。看来我这些年真的都忘记记录自己的生活了,也可能是因为年龄大了吧……

最近新冠肺炎在全球肆虐,截止2020年4月8日下午6点,全美报告的确诊人数已经达到了43万人。肉壳也已经整整在家隔离了一个月。这一个月里,几乎从来不出门,买菜都靠外卖。不过,体重竟然没有增加,也是神奇……

不过也是由于疫情,本来自己的很多计划都被打乱了,有好也有坏。而且,由于肉壳正在为了毕业而努力,所以今年很可能是自己在匹兹堡呆的最后一年。今天就来稍微记录一下,由于疫情,为肉壳带来的遗憾事情吧,也是给自己一个留念。大体就按时间顺序列出,未来可能还会继续增加。

第零件事可能还不算遗憾,因为学校封了,所以本来计划在3月27号的开题报告被迫改成了线上。虽然顺利通过了,但也给我的整个PhD生涯带了一些和别人不一样的体验。不过由于不需要为导师们准备吃喝,所以省下了不少钱,而且因为可以念稿子了,还没导师表扬了一番……

第一件事是关于春假的,从16年开始,肉壳每年春假都会去一波纽约,找雷妈妈打打球,找戴小铲吃吃饭,找郝同学喝喝酒。今年本来还打算去纽约,保持一下自己的记录,但是因为纽约是最早出现确诊的几个地方之一,所以这个计划很早就被自我阉割了。这样之前的记录就被终结了,你说遗憾不遗憾。

第二件事就是和MLB相关了,由于MLB停赛了,今年没有比赛看了。肉壳是洛杉矶道奇队的球迷,从15年来到美国,就一直在关注道奇对客场打海盗的比赛。但是由于每年比赛场次少,而且肉壳每年赛季期间,大部分时间都不在匹兹堡,算下来,只有17年和今年的夏天,肉壳会呆在匹兹堡。在之前几年,肉壳都没能赶上道奇在匹兹堡的比赛,可以说是非常遗憾了。终于,道奇今年要在4月底来匹兹堡比赛,肉壳在1月的时候,就购买4月25号的门票,连看比赛时要穿的衣服都想好了。可惜由于赛季被无限期推迟,今年能不能比赛都是个变数,即使能打,还不知道赛程会变成什么样,到时候我能不能有机会看到道奇的比赛,都是未知数。虽说以后去加州,看道奇的机会肯定很多,实际上,前两年去加州实习的时候,每次都会看道奇的比赛。但是,如果能在匹兹堡看道奇的比赛,肯定是种更好的体验。毕竟海盗是我的第二主队。但现在别说比赛有没有的看了,连买的票能不能退,怎么退都不知道,你说遗憾不遗憾。

第三件事是关于萝卜的,从16年开始,萝卜每年都会来美国开展会,16,17,18年分别去了匹兹堡,纳什维尔和费城,肉壳也都跟着去了。非常怀念16年顾总和萝卜都穿的黑色黄色的衣服,被路人认为是匹兹堡本地人(因为匹兹堡的代表色就是黑和黄)。17年在纳什维尔跟大饼和萝卜买小龙虾吃,还吃了两顿。至今我还会经常在那个网站买小龙虾。另外值得一提的是,那年买了Neil Sadaka的演唱会票,打算和萝卜一起去看的,结果演出被取消了。18年的时候在费城,正好Paul Anka当时在费城附近开演唱会,结果演出又取消了。19年的时候在匹兹堡,但是因为肉壳着急去实习,所以没能陪萝卜开会。20年在克利夫兰,因为可能是肉壳最后一次有机会陪萝卜开会,所以很早就开始策划这个事儿了,结果,萝卜来不了了,你说遗憾不遗憾。

第四件事是因为一件好事引起的,那就是肉壳去年投去EMNLP没有中的paper,中了今年的ACL。这可是我们领域的顶级会议啊,虽然肉壳以前参加过ACL,但是paper是发表在workshop的。这次终于中了主会,本来还期待7月去西雅图玩一圈。结果,今年的ACL也改成纯线上了。所以,可能我唯一一次在顶会上给家讲解我的paper的机会也没有了。最终,这个会的形式可能就是提前录一段视频,然后播给大家看一看就好了。没机会吃吃喝喝了……细数这几年去开会,都玩的非常开心。细想下来,才发现,我每年都有机会去开个会,也是挺爽的。17年去温哥华开ACL,是第一次去开会,在一个华人多的地方,好处就是吃的非常开心。而且萝卜之前在温哥华念书,所以推荐了很多好吃的餐厅。18年是新奥尔良的NAACL,这可是肉壳梦寐以求的地方,爵士乐+小龙虾+酒,我差点就不想回来了。本来还打算3月春假的时候,再去次新奥尔良的,因为太喜欢了,但是也没去了,这也算是一个小遗憾吧。19年和yangbing去夏威夷开AAAI,两个酒鬼一礼拜干掉了两瓶烈酒,每天晚上就是喝酒吃肉。如今去西雅图的机会没有了,你说遗憾不遗憾。

目前就只有这么多,至于什么健身房的会员费因为不敢去现场退费,所以一直这么白交钱之类的事情,就不在这里细说了。以后有什么事,我再来更新,等年底的时候,不行录一期节目,也不失为一种水节目的方法吧……

7月14日更新:

突然又想起来一件事,如果运气好的话,今年就可以逃离匹兹堡这个寒冷的地方了,本来之前计划在离开之前,要去看一场匹兹堡钢人的比赛。因为企鹅和海盗的比赛都看过了,美国三大体育联盟里,就差橄榄球还没有看过了。之前一直觉得橄榄球票价太贵了,所以一直没有太有兴趣去看,只看过NCAA的比赛。今年终于下定决心放血去看一场NFL的比赛,结果去不了了,你说遗憾不遗憾。