DLsite GenreTag Replacer

• 本拡張機能に関して
  • 機能
  • 対応ブラウザ
  • 対応ページ
  • 変換用語一覧
• 開発環境
  • セットアップ方法
  • ビルド方法
• 設計資料
  • 概念図
  • シーケンス図
• リンク

本拡張機能に関して

DLsite.comにおいて 2024年3月 に行われた、ジャンルタグの表記置き換えに対処するための拡張機能です。

機能

• ジャンルタグを旧版（例：メスガキ）で表示
• 検索結果ページに限って、タブタイトルに表示されるジャンルタグの名称を旧版で表示
• コンテキストメニューからの新版・旧版切り替え（複数タブに反映）

対応ブラウザ

• Chrome
• Firefox
• Edge

対応ページ

• 検索結果ページ
• 商品ページ
• ジャンル一覧ページ
• こだわり検索ページ

変換用語一覧

jsonファイルをご参照ください。

開発環境

開発にあたってはTypeScriptを使用しています。また、以下の利用を前提としています。

• VSCode
• WSL2

セットアップ方法

WSL2 上で、以下をインストールします。

• Node Version Manager

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
  source ~/.bashrc

• Node.js（現時点ではLTSのバージョンはv20.11.1）

  nvm install --lts

• ビルドやバンドルに必要なnode_modules

  npm ci

• Gnu Make

  apt install -y make

• zip

  apt install -y zip

ビルド方法

プロジェクトディレクトリ――Makefileが存在するディレクトリ――で以下を実行します。

make

設計資料

概念図

%%{
    init: {
        'theme': 'dark'
    }
}%%

graph LR
  BackgroundScript -- 読み書き --> Storage[(Storage)]

  subgraph Tabs
    subgraph Tab1
      ContentScript1
      DLsitePage1
    end
    subgraph Tab2
      ContentScript2
      DLsitePage2
    end
    subgraph Tab3
      ContentScript3
      DLsitePage3
    end
  end

  BackgroundScript <-- 通信 --> ContentScript1
  BackgroundScript <-- 通信 --> ContentScript2
  BackgroundScript <-- 通信 --> ContentScript3

  ContentScript1 -- 置換処理 --> DLsitePage1
  ContentScript2 -- 置換処理 --> DLsitePage2
  ContentScript3 -- 置換処理 --> DLsitePage3

シーケンス図

%%{
    init: {
        'theme': 'dark'
    }
}%%

sequenceDiagram
  actor User

  User    ->> Browser: タブを開く
  Browser ->> ContentScript: 呼び出し
  activate ContentScript
  ContentScript ->> BackgroundScript: 初期化完了を通知
  activate BackgroundScript
  BackgroundScript ->> Storage: タブIDを保存
  deactivate BackgroundScript
  ContentScript ->> BackgroundScript: 置換処理に必要なデータをリクエスト
  activate BackgroundScript
  BackgroundScript  ->> Storage: 変換表を読み出し
  BackgroundScript  ->> Storage: 変換モードを読み出し
  BackgroundScript -->> ContentScript: データ返却
  deactivate BackgroundScript
  ContentScript ->> DLsitePage: 置換処理を実行
  deactivate ContentScript


  User    ->> Browser: コンテキストメニューをクリック
  Browser ->> BackgroundScript: 呼び出し
  activate BackgroundScript
  BackgroundScript ->> Storage: 変換モードをスイッチングして保存
  BackgroundScript ->> Storage: 保存していた全てのタブIDを読み出し
  loop タブIDごと
  BackgroundScript ->> ContentScript: 通知
  deactivate BackgroundScript
  activate   ContentScript
  ContentScript ->> BackgroundScript: 置換処理に必要なデータをリクエスト
  activate BackgroundScript
  BackgroundScript  ->> Storage: 変換表を読み出し
  BackgroundScript  ->> Storage: 変換モードを読み出し
  BackgroundScript -->> ContentScript: データ返却
  deactivate BackgroundScript
  ContentScript ->> DLsitePage: 置換処理を実行
  deactivate ContentScript
  end


  User    ->> Browser: タブを閉じる
  Browser ->> BackgroundScript: 呼び出し
  activate BackgroundScript
  BackgroundScript ->> Storage: タブIDを削除
  deactivate BackgroundScript

リンク

• TypeScript
• esbuild
• Web Extensions Reference (Firefox)
• Web Extensions Reference (Chrome)