分类
木讷技术宅

为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

分类
木讷技术宅

如何更新已经破解的Switch系统

2020年11月20日更新,新的塞尔达无双已经出了,所以需要安装新的系统才能玩。自从上次升级了9.2.0,后面陆陆续续出了好多个系统版本升级,分别是10.0.0,10.0.1,10.0.2,10.0.3,10.0.4,10.1.0,以及10.2.0。SX OS的版本最新的也已经是3.0.5 beta了。大家记得下载对应的更新版。我在自己升级的时候,是一个版本一个版本升级上去的。但是据我观察,实际上每个系统的安装包大小差不多,安装过程貌似也是增量安装。所以有可能可以一次性从9.2.0升级到10.2.0。我胆子小没有尝试,不过我的勇士朋友董女士打算以身试法,回头给大家更新结果……

2020年11月21日更新,感谢勇敢的董女士以身试法。系统升级确实可以跳级直升……所以无论你的系统版本现在是多少,都可以直接升级到你想要的版本。

———- 分割线 ———-

今年过年前,把自己的Switch破解了,安装了SX OS。简单地说,这个SX OS就是个双系统,这样你的Switch既可以进入正版系统,和别人联机,也可以进入盗版系统玩盗版游戏。声明!不是不报,时候未到,破解机器带来的风险还是有的!如果你的机器还没有破解,我建议你继续玩正版游戏!如果你想破解的机器,需要知道,即使是这样的双系统,也可能导致未来被Ban,只是目前来说,理论上不会被Ban而已。不过今天,我们不谈如何破解机器,有兴趣的朋友,可以去网上搜搜其他资料。

最近,动物森友会发售了,肉壳也很想玩一玩,于是下载了下来,发现,必须要安装最新的NS系统才可以。所以,必须要升级系统才可以玩,虽然所有系统都可以通过各种手段在线升级,但是肉壳还是比较小心谨慎地,所以打算继续用离线的方式升级。再声明一下,本片文章的内容,是教大家如何把NS的系统从9.1.0升级到9.2.0,以及SX OS 2.9.3升级到2.9.4,并未测试在其他版本上,如果未来我还会升级系统,我会继续在文章底部更新版本。如果你的系统和我的系统版本不一样,请自行斟酌是否要跟随本教程操作。

首先,我们需要去Darthsternie下载NS最新的9.2.0固件。

然后,我们需要一个Homebrew插件ChoiDujourNX,目前看到的最新版是1.0.2,与2019年4月更新。

此时,我们已经有两个文件了,一个是Firmware 9.2.0.zip,一个是ChoiDujourNXv102.zip。

将Firmware 9.2.0.zip解压到一个文件夹,我们就叫它Firmware 9.2.0。将这个文件夹拷贝到Switch的SD卡的根目录下。

将ChoiDujourNXv102.zip解压到另一个地方,里面会包含一个ChoiDujourNX.nro文件。将这个文件拷贝到Switch的SD卡的switch目录下。如果没有switch文件夹,就新建一个即可。

将SD卡放回Switch,进入SX OS。进入相册,此时,应该可以看到SX OS的菜单。如果没看到,说明你进错系统了……

进入到HOMEBREW菜单,可以看到ChoiDujourNX程序,点击进入。

进入后,选择进入Firmware 9.2.0文件夹。

按屏幕右下角的Choose。

等待程序检测完毕,按9.2.0 (exFAT)。这里假设大家的SD卡都是exFAT格式化的。毕竟,很多大于4G的游戏,在FAT32格式的SD卡里是存储不了的。

等到程序检测完毕,选择屏幕下方的Select firmware。

在下一个界面,我们可以看到,有个选项叫做Prevent fuse burning (enable AutoRCM)。默认是选择的,大家可以继续选这个。具体的解释这个功能是什么,我放在文章结尾了。这时候,大家只要点选Start installation就可以了。

等安装完成,选择右下角的Reboot,重启机器。

这个界面,我们选择Shutdown now! 因为我们还要更新SX OS。

关机后,就可以取出SD卡,接回电脑上了。

当然,我们还需要去Team Xecuter SX下载最新的固件,最新的版本是2.9.4 beta。

下载后的文件名叫SXOS_beta_v2.9.4.zip,解压里面的文件,得到boot.dat文件。将这个文件复制到SD卡的根目录。准确的说,是要覆盖原有的boot.dat。

此时,可以把刚才的Firmware 9.2.0文件夹删掉以节省SD卡空间。

将SD卡放回Switch。如果你刚才选择了AutoRCM。那么现在就不需要手动进入恢复模式了。只要把XS OS的loader插在机器的电源接口,按电源键,就可以直接进入系统了。

进入系统,我们就可以发现,破解系统的版本已经是9.2.0,而SX OS的版本也升级到了2.9.4了。

———- 分割线 ———-

下面给大家稍微解释一下,什么是AutoRCM。简单地说,在没有启动AutoRCM的时候,你每次想进入子系统,就需要把短接器和loader都接在机器上,然后按住音量键和电源键开机,再选择进入哪个系统。不过,如果启动了AutoRCM,每次开机就不需要那么繁琐,只需要接上loader,然后按电源键即可。

除此以外,AutoRCM还有个好处,就是可以让机器保留以后降级回旧系统的可能性。

我们都知道,这个世界上是不可能存在完美的程序的。所以,厂商总希望通过升级系统来修复bug,或者堵住漏洞。为了防止用户再降级到某个有漏洞的版本。所以,他们在主机里加了一块芯片。芯片里面有很多导线。当系统升级的时候,主机会熔断其中的导线。当系统启动的时候,系统会检查还剩下多少导线没有被熔断。如果被熔断的导线太多,导致剩余的导线比系统需要的少,系统则自动关机,反而系统则启动。所以,当你升级到更高级的系统的时候,主机自然会熔断更多导线,而当你想降级的时候,系统发现熔断的导线过多,就无法启动了。

另外,由于熔断导线这种操作是不可逆的,所以真的就是断了就断了。虽然说可以拆开机器和芯片,再手动接导线上去,但是成本太高,几乎就是理论上可行的阶段。

而AutoRCM会防止主机熔断导线,继而提供未来降级系统的可能性。大概就是这样。

分类
木讷技术宅

如何为Catalina安装Logitech Options

首先声明,这是一封有时限的文章,因为肉壳在写文章的时候,Catalina刚刚发布,虽说各大厂商应该在系统还处于beta版时,就开始为自己的软件提供支持,尤其是像macOS这样升级率极高的系统。当时罗技愣是没有这么做,以至于罗技的Logitech Options在我升级到最新系统后无法安装。目前,罗技官网的Logitech Options的版本是9月4日发布的8.0.559,这个版本的驱动程序在安装的时候会卡住。大概是因为Catalina的安全策略和以前的系统不一样,所以安装程序不能正常的获取安装权限吧。所以今天给大家介绍一个方法,用来安装Logitech Options。

其实方法非常简单,只要右键点击安装程序,选择“Show Package Content“,我这里用的是英文版macOS,如果你使用的是中文,应该就是右键之后的“打开”下面的选项。打开之后,进入下面目录。

Contents/Resources/

然后双击LogiMgr.mpkg安装程序。

这样,Logitech Options就安装成功了!但是!我们依然无法通过系统偏好面板里启动Logitech Options,因为这个功能是真的坏掉了啊。如果要启动,请通过Launchpad里面的应用程序来启动。

现在就是等罗技那边升级程序了,真的太蛋疼了。

分类
木讷技术宅

如何在Anaconda安装Tensorflow 2.0

20年1月17日更新,Anaconda已经(早就)正式支持TF2.0了,所以现在的安装方法巨简单了……

  1. 安装Anaconda就不多说了:https://www.anaconda.com/distribution/
  2. 创建一个新环境
    conda create -n your_env_name python=3.7 tensorflow-gpu
    如果不需要gpu版本,就把“tensorflow-gpu”换成“tensorflow”就好啦……
  3. 激活新环境
    conda activate your_env_name

大概就是这样……

如果你有兴趣看看之前是怎么安装的,可以接着往下看……

以下是原文:

年更选手赶在年底前更新一波。

肉壳之前在写神经网络相关的程序时,大多用的是Keras,因为组里的学长在用,而且我的项目也是基于一组Keras的代码。最近由于强迫症发作,在重装系统,发现Tensorflow已经升级到2.0了,而且也早就集成了Keras了,所以干脆想要一步到位升级到TF 2.0就算了。但是由于TF 2.0现在还只是测试版,所以Anaconda没有集成好的安装包,所以需要自己手动安装一些库,好在还是比较简单的。

  1. 安装Anaconda就不多说了:https://www.anaconda.com/distribution/
  2. 创建一个新环境
    conda create -n your_env_name python=3.7 cudnn cupti cudatoolkit=10.0
  3. 激活新环境
    conda activate your_env_name
  4. 安装Tensorflow-gpu 2.0 rc1
    pip install tensorflow-gpu==2.0.0-rc1
    pip install tensorflow-gpu

本篇文章写于19年9月16日,所以目前Anaconda还不能一键安装所有package,未来可能就可以了,另外,目前最新的TF版本是2.0.0-rc1,大家可以通过这里查询最新的2.0测试版版本号。还有,如果你安装rc版本的话,有可能在使用pycharm的时候,会遇到无法解析package的问题。官方说可能要等到2.0正式版出了。原因详见这个issue。如果有强迫症的话,安装beta版本就可以了,貌似这个问题是从rc版本开始有的。

19年10月4日更新,TF2.0正式版已出了,所以已经更新了安装命令了。另外,此文章不再更新cudatoolkit的安装版本,如果你在很久以后看到这篇文章,记得查一查cudatoolkit的版本,麻烦了。

大概就是这样……