home/拡張機能/

拡張機能製作入門

拡張機能製作入門

拡張機能/ユーザースクリプトを作成したい貴方へ！

AIに聞けあえてAIに聞けとは言わない！

やってみたいけどよくわかんねぇという方へのアドバイス！編集歓迎！

はじめに

できることを把握しよう！

まず、ユーザースクリプトというのは既に完成しているサイトに変更を加えるものです。
そのため、機能を追加したり変更するにしても限度はあります。

例えば、自分が他人にどれだけdelされているか知りたいから見えるようにする！といったものを作ろうとしても、
そういった情報はあくまで内部データでありサイト上には存在しないので作れません。

JavaScriptを知ろう！

基本的にユーザースクリプトはJavaScriptを使用して製作されています。
JavaScriptは主にサイトの動的表現をサポートするための言語ですが、様々な用途で使用されています。
実際に使用されているdocumentって何？getAttributeって何？などの細かいな単語は分からなけりゃ随時調べればいいので問題はありませんが、
基本構文(宣言、変数、定数、条件分岐、繰り返し、例外等)を理解しておくと困った時に解決しやすいです。

サイトの構成を知ろう！

ユーザースクリプトを作る上で必要な情報はサイト内に詰まっています。
ブラウザに搭載されている開発者ツール(DevTools)を利用し、HTMLやローカルストレージなどから必定な情報を確認しましょう。
HTMLやローカルストレージって何？というのはググれここでは語りきれない…

カタログやスレの情報を取得する時は注意しよう！

2026.08.19 に二次元裏にも適用された新システム（便宜上v2と表記）において、カタログやスレッドの情報を取得するための関数を管理人さんが用意してくれました。
これは…ありがたい……

情報元: 拡張機能の作成サポートについて

どういうことかというと、v2では負荷軽減のために ブラウザに映っていない範囲は描画しない という仕組みがあるため、表示内容からカタログやスレの情報を取得しようとしても上手くいかない場合がある、ということです。
カタログやスレの情報取得が必要な拡張機能を作る場合はリンク先で紹介されている関数を利用しましょう。

作成してみる

※Tampermonkeyがインストールされている前提です。詳しくは../拡張機能導入方法

実際に作ってみよう！

  1. Tampermonkeyのダッシュボードで[+]となっているタブを押下し新規スクリプトを開く。
  2. // Your code here... と記載されている箇所に自由にコードを入力する。
  3. @matchに対象となるサイトを記載する。(*をつけることでワイルドカードとして使用可能)

動作確認しよう！

  1. [ファイル]→[保存]もしくは[Ctrl]+[S]で保存する。
  2. 対象のサイトを開く。(もしくはリロード)
  3. 目的の動作ができているかを確認。

ワンポイントアドバイス

他人のコードを参考にしよう！

他の方の作成されたユーザースクリプトの内容は公開されているので閲覧可能です。
実際に動作しているモノがどう書かれているかを見るのはとても参考になります。

対象となる要素は絞ろう！

ページ弄るんだから全部読み込んでからフィルタリングすればよくない？と思うかもしれませんが、そうすると処理が重くなります。
あくまで対象となり得る可能性の要素のみを対象にした方が処理が軽いスクリプトになります。

コンソールを利用し確認しよう！

consoleを使用するとコンソールにログが出力されるようになります。
開発者ツールからコンソールを確認し、処理に入っているか、使用するオブジェクトがどういったものか、
エラーが発生している場合はどういったエラーなのかなどを確認できます。

※コンソール出力が多すぎると負荷がかかる
※公開時には不要なコンソール出力は消しておくこと

動的監視をしよう！

あいもげは一度開いたら終わりではなく、リロードでカタログが入れ替わったりレスが追加されたりします。
そういった追加/変更された部分を対象にするために動的監視を行いましょう。
やり方は調べてください。

動かなくなることはある！

ユーザースクリプトはあくまで第三者が勝手に作っている物です。
サイト側の仕様変更により一切動作しなくなることはザラです。
しかも細かい構成の変更などはいちいち知らせがないことの方が多いです。泣きながら修正しましょう。

公開してみる(GreasyFork)

  1. GreasyForkを開く。
  2. ログインする。
  3. ログイン後、右上のユーザー名を押下し開く。
  4. [スクリプトを投稿する]を押下し開く。
  5. [コード]に作成したコードを貼る。
    こちらを参考に必要な情報が記載されているか確認する。
    (主に@name、@version、@license)
  6. 追加情報に必要であれば説明などを書く。
  7. [スクリプトを投稿]を押下する。
  8. 完了