中华职棒 | 肉壳的胡思八道

上一次（其实就是昨天），为了防止中华职棒官方的录播页面剧透比分，所以我写了个简单的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插件加载Javascript