MintWatch でタイトルの横に大百科記事ボタンを追加するプラグイン

cyaki_mintwatch_quickpedia.user.js

// ==UserScript==
// @name         MW-QuickPedia
// @namespace    cyaki_mw_quickpedia
// @version      2025-10-26-a
// @description  MintWatch でタイトルの横に大百科記事ボタンを追加するプラグイン
// @author       CYakigasi
// @match        https://www.nicovideo.jp/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=nicovideo.jp
// @grant        none

// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';
    const elementId = "pmwp-cyaki-quickpedia"
    const buttonId = "pmwp-cyaki-quickpedia-button"
    const styleId = "pmwp-cyaki-quickpedia-style"

    // プレイヤーの準備完了/動画の切り替えイベントを待ち受ける
    document.addEventListener("pmw_playerReady", (e) => {
        // すでにプラグインリストに表示がある場合は何もしない
        if ( !document.getElementById(elementId) ) {
            console.log("PMW Plugin: QuickPedia")
            // プラグインリストにプラグインを表示する(推奨)
            const itemElem = document.createElement("div")
            itemElem.id = elementId
            itemElem.className = "plugin-list-item"
            itemElem.innerHTML = `<div class="plugin-list-item-title">
                 クイック大百科
            </div>
            <div class="plugin-list-item-desc">
                動画記事に素早く移動するためのリンクを追加します。
            </div>`
            const pluginListElement = document.getElementById("pmw-plugin-list")
            pluginListElement.appendChild(itemElem)
        }

        // スタイルを用意
        if (!document.getElementById(styleId)) {
            const styleElem = document.createElement("style");
            styleElem.id = styleId
            styleElem.innerHTML = `
a#pmwp-cyaki-quickpedia-button {
    color: rgb(255, 255, 255);
    font-size: 0.7em;
    background: var(--accent1);
    border-radius: var(--radius-mini);
    padding: 1px 2px;
    text-decoration: none;
    margin-left: 4px;
    font-weight: normal;

    &[data-is-available="true"] {
        background: rgb(184, 20, 20);
    }
}
            `
            document.body.appendChild(styleElem)
        }

        const thisVideoId = JSON.parse(e.detail).videoInfo?.data.response.video?.id

        // ボタンが未作成の場合
        if ( !document.getElementById(buttonId) ) {
            // 要素を作成
            const PediaButton = document.createElement("a")
            PediaButton.id = buttonId
            PediaButton.href = `https://dic.nicovideo.jp/v/${thisVideoId}`
            PediaButton.innerHTML = `？`
            // 動画タイトルをピックアップしてappendChild
            const videoTitleElements = document.getElementsByClassName("videotitle")
            // ない場合も考慮する
            if (videoTitleElements.length > 0) {
                const videoTitleElement = videoTitleElements[0]
                videoTitleElement.appendChild(PediaButton)
            }
        }

        // ここは毎回実行される
        // APIを呼んで存在確認を更新
        const buttonElement = document.getElementById(buttonId)
        if (buttonElement) {
            fetch(`https://api.dic.nicovideo.jp/v1/articles/video/${thisVideoId}`).then(response => {
                if (response.ok) {
                    buttonElement.innerHTML = "百"
                    buttonElement.setAttribute("data-is-available", "true")
                } else {
                    buttonElement.innerHTML = "？"
                    buttonElement.setAttribute("data-is-available", "false")
                }
            })
        }
    })
})();