コロナなんてもう見たくない。Qiitaで「コロナ」が含まれる記事を非表示にするChrome Extensionを作った

はじめに

こんにちは、@yshr10icです。

緊急事態宣言が発令されてから10日ちょっと、私は在宅勤務をはじめて1ヶ月ほどが経ちました。
テレビを付ければどこかのチャンネルでコロナの話題が取り上げられ、SNSでもどこかしらでコロナについて発信されています。

正直、ちょっと嫌になってきませんか？

私はなりました。
テレビは付けなければ済みますし、SNSであれば「コロナ」をミュートに設定すればある程度は目に付かなくなるでしょう。ただ、私たちエンジニアがお世話になっているQiitaには、ユーザをミュートにする機能はあってもキーワードをミュートにする機能はありません。

キーワードをミュートにする機能がないのであれば、作ってしまえば良いと思い、「コロナ」が含まれる記事を非表示にするChrome Extensionを作りました。

※Qiitaに投稿されているコロナに関する記事は素晴らしいものばかりだと思っています。本記事はコロナに関する記事を否定するようなものではございませんので、予めご了承ください。

なお、Chrome Extensionを作成するにあたり、以下の記事を参考にさせていただきました。

• Qiitaでユーザーをブロック（非表示に）する拡張機能を作った

作ったChrome Extension

コードはGitHubにあげています。

機能としては以下の通りです。

• トレンド、タイムライン、タグフィード、マイルストーンに表示されている記事一覧の中で、タイトルに「コロナ」を含んでいる記事を非表示にする
• 記事を開いたときに、タイトル、記事本文、リンク、コメントに「コロナ」を含んでいた場合、トップページに遷移させる

非常に単純なもので、3つのファイルから構成されています。

manifest.json

Chrome Extensionを開発する上で必要となるファイルです。
Chrome Extensionに必要な情報を記載します。

{
    "name": "QiitaCoronaMuter",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "Mute corona articles in Qiita",
    "content_scripts": [{
        "matches": ["https://qiita.com/*"],
        "js": [
            "js/jquery-3.5.0.min.js",
            "js/content.js"
        ]
    }]
}

今回は特に配布するつもりもなかったので、アイコンなどの情報は記載していません。

jquery-3.5.0.min.js

jQueryのソースコードです。ここからダウンロードしました。

content.js

メインの処理が書かれたものです。
URLにより、処理を分岐しています。タイムライン、タグフィード、マイルストーンに関しては、「もっと読む」ボタンを押した後に表示された情報も非表示にするために、0.5秒に1回処理を実行するようにしています。（もっとうまいやり方があるかとは思いますが、思い浮かばず。。。）

var url = location.href;
url = url.replace($(location).attr('search'), '');

switch(url) {
    // トレンド
    case 'https://qiita.com/':
        $(function() {
            muteTrend();
        });
        break;
    // タイムライン
    case 'https://qiita.com/timeline':
        setInterval(function() {
            muteTimeline();
        }, 500);
        break;
    // タグフィード
    case 'https://qiita.com/tag-feed':
        setInterval(function() {
            mute('tf');
        }, 500);
        break;
    // マイルストーン
    case 'https://qiita.com/milestones':
        setInterval(function() {
            mute('ms');
        }, 500);
        break;
    default:
        // 記事
        if (url.search(/\/items\//g) != -1) {
            muteArticle();
        }
        break;
}

function muteTrend() {
    $('.tr-Item').each(function(index, element) {
        if (includeCorona($(element).children('div').children('a').text())) {
            $(element).hide();
        }
    });
}

function muteTimeline() {
    $('.tl-Item').each(function(index, element) {
        if (includeCorona($(element).children('div').children('.tl-ItemContent').children('div').children('div').children('a').text())) {
            $(element).hide();
        }
    });
}

function mute(prefix) {
    $('.' + prefix + '-Item').each(function(index, element) {
        if (includeCorona($(element).children('div').children('.' + prefix + '-ItemContent').children('div').children('a').text())) {
            $(element).hide();
        }
    });
}

function muteArticle() {
    if (includeCoronaInArticle()) {
        location.href = 'https://qiita.com/';
    }
}

function includeCoronaInArticle() {
    // タイトル
    if (includeCorona($('.it-Header_title').text())) {
        return true;
    }
    // 本文
    if (includeCorona($('#personal-public-article-body').html())) {
        return true;
    }
    // リンク
    $('.it-Reference').each(function(index, element) {
        if (includeCorona($(element).children('a').text())) {
            return true;
        }
    });
    // コメント
    $('.co-Item').each(function(index, element) {
        if (includeCorona($(element).children('div.co-Item_text').html())) {
            return true;
        }
    });
    return false;
}

function includeCorona(text) {
    let regex = /コロナ/g;
    return text.search(regex) != -1;
}

最後に

Chrome Extensionは初めて作ったのですが、非常に簡単に作ることができました。（私の場合は、JavaScript、jQueryに慣れておらず、DOM操作に苦労しましたが。）

本記事では、「コロナ」を見ないようにするために、記事を非表示にするChrome Extensionを作りました。本記事にもたくさんの「コロナ」が散りばめられているので、Chrome Extensionのおかげできっと非表示されることでしょう。

皆さんもコロナで疲弊しないようにお気を付けください。また、一日でも早くコロナが収束することを願っています。