デュエルマスターズwiki( https://dmwiki.net/ )で条件に合うカードを探してる時、タグ検索するじゃないですか。

そのときこういう表示になると思うんですけど…これめんどくさくないですか？

「こういう条件のカードが欲しいってのは分かってて、多分このタグとこのタグは機能してるんだけど、それ以外の部分はちゃんとタグ付けされてないか言語化しにくい部分だからタグが機能してないだろうな～…これいちいち項目クリックして詳細調べなきゃダメかな～…」

ってなるじゃないですか。なるんですよ。

つまるところこういう表示が欲しくなったりしませんか？

これを実現するchrome拡張を作りました。
まあリンク先の要素を取得してきて表示するだけなんで単純です。

ファイル構成

chromeの独自拡張機能を実装するには最低限manifest.jsonと実装を書いたjsファイルだけあればよいので以下のようにしています。

MyExtension/
│
├── manifest.json
└── content_script.js

background.jsから閲覧しているページのDOM要素を直接操作することはできないのでcontent_script.jsを用意しましょう。
逆に今回background.jsは何もしないので使いません。

コード

manifest.json

{
    "manifest_version": 3,
    "name": "Taglist Enhancer",
    "version": "1.0",
    "permissions": [
        "activeTab",
        "scripting",
        "contextMenus"
    ],
    "content_scripts": [
        {
            "matches": ["https://dmwiki.net/?cmd=taglist&tag=*"],
            "js": ["content_script.js"]
        }
    ]
}

content_script.js

function fetchData(url) {
    return fetch(url)
        .then(response => response.text())
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, "text/html");
            return doc.querySelector('.ie5 table.style_table');
        });
}

document.querySelectorAll('ul.taglist.pages li a').forEach(a => {
    const href = a.href;
    fetchData(href).then(table => {
        a.parentNode.insertBefore(table, a.nextSibling);
    });
});

リンク先のtableを取得してそれぞれのリスト項目のaタグの後ろに追加してるだけです。

実装した拡張機能の読み込み

最後に作った拡張を読み込んで実行します。

chromeで「chrome://extensions/」にアクセスすると拡張機能の設定画面に飛びます。

右上に「デベロッパーモード」という項目があるので、コレをオンにします。

その後左上の「パッケージ化されていない拡張機能を読み込む」でコードの入ったディレクトリ（今回の場合MyExtension）を選択して拡張機能を読み込みます。

すると作成した拡張機能が読み込まれるので、一度リロードしてデュエマwikiの適当なタグ検索結果ページに飛びましょう。

こういう感じになっていればOK！

終わりに

これで10倍くらいカードを探す作業がラクになった気がする。自省としてカードゲーマーはカード情報へのアクセスを簡易にする努力をもっとすべきだと思った。これからは10倍早くデッキが作れるだろう……。