DLsite Search Form at Top

Greasy Fork is available in English.
DLsite Search Form at Top

DLsite.com の検索結果画面の左側検索入力を検索結果のトップに複製して可読性と検索性を向上させます。
当前为 2025-07-31 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         DLsite Search Form at Top
// @namespace    https://x.com/kawaiiinf
// @version      1.0
// @description  DLsite.com の検索結果画面の左側検索入力を検索結果のトップに複製して可読性と検索性を向上させます。
// @author       Kawaii monkey
// @license      BSD 2-Clause
// @match        https://www.dlsite.com/*
// ==/UserScript==

(function() {
    'use strict';

    /**
     * メインの処理を実行する関数。
     * .cp_search要素の祖先にあるformタグを検索し、その複製を.search_topの直後に挿入する。
     * 複製したform内の入力欄の幅を調整する。
     */
    function executeFormDuplication() {
        console.log('[DLsite.com 検索フォーム 複製] メイン処理を実行します。');

        // .cp_search要素と.search_top要素を直接取得
        const cpSearchElement = document.querySelector('.cp_search');
        const searchTopElement = document.querySelector('.search_top');

        // 必須要素が存在しない場合は処理を中断
        if (!cpSearchElement || !searchTopElement) {
            console.log('[DLsite.com 検索フォーム 複製] .cp_searchまたは.search_top要素が見つかりませんでした。');
            return; // ここで処理を終了
        }

        // .cp_searchの最も近い祖先form要素を取得
        // closest('form')は、指定されたセレクターに一致する最も近い祖先要素（自身を含む）を返す
        const parentForm = cpSearchElement.closest('form');

        // formタグが見つからなかった場合は処理を中断
        if (!parentForm) {
            console.log('[DLsite.com 検索フォーム 複製] .cp_searchの祖先にformタグが見つかりませんでした。');
            return; // ここで処理を終了
        }

        // formタグを複製
        // cloneNode(true)は、要素とそのすべての子孫要素も深く複製する
        const clonedForm = parentForm.cloneNode(true);

        // 複製したformタグを.search_top要素の直後に挿入
        // searchTopElement.after(clonedForm)は、searchTopElementのすぐ後ろにclonedFormを挿入する
        searchTopElement.after(clonedForm);
        console.log('[DLsite.com 検索フォーム 複製] Formが複製され、.search_topの直後に挿入されました。');

        // 複製したformの中からtype="search"のinput要素（入力欄）を探す
        const inputElement = clonedForm.querySelector('input[type="search"]');

        // input要素が見つかった場合、幅を調整
        if (inputElement) {
            // 幅を計算し、スタイルに適用する。calc()関数で100%から30pxを引く
            inputElement.style.width = 'calc(100% - 30px)';
            console.log('[DLsite.com 検索フォーム 複製] 複製されたform内の入力欄の幅を調整しました。');
        } else {
            console.log('[DLsite.com 検索フォーム 複製] 複製されたform内に入力欄（input[type="search"]）が見つかりませんでした。');
        }
    }

    // window.loadイベントリスナーを追加する
    // loadイベントは、ページ上の全てのコンテンツが完全に読み込まれた後に発火する
    window.addEventListener('load', function() {
        // loadイベント発火後、すぐにメイン処理（executeFormDuplication関数）を実行する
        executeFormDuplication();
    });
})();