用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