🔖

pixivのタグが投稿者の付けたものか分かる拡張機能を作った

2022/10/22に公開約2,000字

はじめに

はじめまして、こんにちは。
どうも最近のpixivでは「タグ荒らし」なるものが流行っているらしいですね……
少しでも助けになれればと思い、タグが投稿者に付けられたものか分かる拡張機能を作成しました。

インストール方法

ブラウザの各種ストアからダウンロードできます。

機能

機能は大きく2つ

  • タグに目印をつける
  • そもそもタグを表示しない

この拡張機能をインストールした状態で作品を開くと、タグの表示が以下のように変わると思います。

チェックマークは投稿者が付けたタグを、南京錠のマークはロックされたタグを表しています。

また、設定より表示するマークを制限することも出来ます。
以下はロックマークを非表示にした例です。

表示するタグを絞り込みたい場合にも対応しています。
以下は投稿者のタグとロックされたタグのみを表示しています。

使い所

私のとしては、

  • 「フリー素材」タグや「AI」タグが実際に投稿者によって付けられたか確認
  • ネタタグなどを非表示

などを想定しています。

ただ、友達に拡張機能を宣伝した際に

「面白タグwww」とか言いながら自演するおじさんがひと目でわかるのは良き

と感想を頂きました。

ヤダ、おぢさん怖い……

技術関連

GitHubはこちら
MITライセンスです。

使用した言語

開発にはJavaScriptを使用しました。
あまり大きな機能をつける予定は無く、最もミニマムな構成で行こうと思ったので選んだのですが、正直失敗だと感じました。
TypeScriptに甘やかされてた体は、JavaScriptを受け付けてくれませんでした。

詰まった所

ページ遷移で拡張機能が動作しない

pixivはSPAということもあり、ページ遷移でうまく拡張機能が動作しませんでした。
ですので、ページ遷移にはbodyを監視してDOMに変更があった際にhrefが変わったかを見てページ遷移を判定しました。
具体的には以下のようなコードになります。

let href = window.location.href;
const body = document.body;

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (href !== window.location.href) {
      href = window.location.href;
      // Do something
    }
  });
});

const config = {
  childList: true,
  subtree: true,
};

observer.observe(body, config);

DOMの更新が引き継がれる

これもSPA特有の問題でしょう。
遷移先に同じタグがあった場合、そのタグに二重にマークが付いてしまうという問題が発生しました。
幸い、この問題は追加したDOMをページ遷移の際に消すだけで対応できました。

最後に

お読み頂きありがとうございました。
(タグがロックされてるか自体は普通に確認できるし、まんまり使い所無いかもしれない……)

Discussion

ログインするとコメントできます