☰

NipponDict

Japanese dictionary, pop-up, using Jisho

// ==UserScript==
// @name         NipponDict
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Japanese dictionary, pop-up, using Jisho
// @author       iljann
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        #jp-popup {
            position: fixed; z-index: 999999; display: none;
            background: #FEFEFE; border: 1px solid #E8E8E8; border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.08); font-family: system-ui, sans-serif;
            max-width: 400px; min-width: 280px; padding: 0;
        }
        #jp-header {
            background: linear-gradient(135deg, #FFF8F0, #F0F8FF);
            color: #6B7280; padding: 12px 16px; border-radius: 12px 12px 0 0;
            font-size: 13px; font-weight: 500; position: relative;
        }
        #jp-header::before { content: "あ"; color: #F59E0B; font-weight: 600; margin-right: 8px; }
        #jp-close {
            position: absolute; top: 8px; right: 12px; background: none;
            border: none; color: #9CA3AF; cursor: pointer; font-size: 16px;
        }
        #jp-content {
            padding: 16px; background: #FEFEFE; color: #374151;
            max-height: 350px; overflow-y: auto; border-radius: 0 0 12px 12px;
        }
        .jp-word {
            font-size: 20px; color: #1F2937; font-weight: 600; text-align: center;
            padding: 10px; background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
            border-radius: 6px; margin-bottom: 12px; border-left: 3px solid #F59E0B;
        }
        .jp-reading {
            font-size: 16px; color: #D97706; text-align: center;
            margin-bottom: 12px; font-style: italic;
        }
        .jp-source {
            background: #FEF3C7; color: #D97706; padding: 2px 6px;
            font-size: 9px; border-radius: 3px; margin-right: 6px;
            text-transform: uppercase; font-weight: 500;
        }
        .jp-def {
            font-size: 14px; line-height: 1.5; color: #374151;
            padding: 12px; background: #FEFEFE; border: 1px solid #F3F4F6;
            border-radius: 6px; margin-bottom: 10px;
        }
        .jp-pos {
            background: #F1F5F9; color: #64748B; padding: 2px 6px;
            font-size: 9px; border-radius: 3px; margin-right: 6px;
            text-transform: uppercase; font-weight: 500;
        }
        .jp-tags {
            margin-top: 6px;
        }
        .jp-tag {
            background: #E0E7FF; color: #3730A3; padding: 1px 4px;
            font-size: 8px; border-radius: 2px; margin-right: 4px;
            text-transform: lowercase;
        }
        .jp-loading {
            text-align: center; padding: 30px; color: #6B7280;
            animation: pulse 1.5s ease-in-out infinite;
        }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
        .jp-error { text-align: center; padding: 20px; color: #6B7280; font-size: 13px; }
    `);

    const popup = document.createElement('div');
    popup.id = 'jp-popup';
    popup.innerHTML = `
        <div id="jp-header">NipponDict <button id="jp-close">×</button></div>
        <div id="jp-content"></div>
    `;
    document.body.appendChild(popup);

    const content = document.getElementById('jp-content');
    const closeBtn = document.getElementById('jp-close');
    const japaneseRegex = /[\u3040-\u309F\u30A0-\u30FF\u4E00-\u9FAF]/;

    let isVisible = false;
    let timeout;

    function close() {
        popup.style.display = 'none';
        isVisible = false;
    }

    function position(x, y) {
        let left = x + 15;
        let top = y + 15;
        if (left + 400 > window.innerWidth) left = x - 415;
        if (top + 250 > window.innerHeight) top = y - 265;
        popup.style.left = Math.max(10, left) + 'px';
        popup.style.top = Math.max(10, top) + 'px';
    }

    function getJapaneseText(element) {
        const selection = window.getSelection().toString().trim();
        if (selection && japaneseRegex.test(selection)) return selection;
        if (!element) return null;
        const text = element.textContent || element.innerText || '';
        const match = text.match(/[\u3040-\u309F\u30A0-\u30FF\u4E00-\u9FAF]+/);
        return match ? match[0] : null;
    }

    // Query Jisho API
    function queryJisho(word) {
        return new Promise((resolve) => {
            GM_xmlhttpRequest({
                method: 'GET',
                url: `https://jisho.org/api/v1/search/words?keyword=${encodeURIComponent(word)}`,
                headers: {
                    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
                },
                onload: function(response) {
                    try {
                        if (response.status === 200) {
                            const data = JSON.parse(response.responseText);
                            if (data.data && data.data.length > 0) {
                                const results = data.data.slice(0, 4).map(entry => {
                                    const japanese = entry.japanese[0] || {};
                                    const senses = entry.senses || [];
                                    return {
                                        word: japanese.word || japanese.reading || word,
                                        reading: japanese.reading || '',
                                        senses: senses.slice(0, 3).map(sense => ({
                                            pos: sense.parts_of_speech || [],
                                            definitions: sense.english_definitions || [],
                                            tags: sense.tags || []
                                        }))
                                    };
                                });
                                resolve(results);
                            } else {
                                resolve([]);
                            }
                        } else {
                            console.log('Jisho request failed:', response.status);
                            resolve([]);
                        }
                    } catch (e) {
                        console.log('Jisho parse error:', e);
                        resolve([]);
                    }
                },
                onerror: function(error) {
                    console.log('Jisho request error:', error);
                    resolve([]);
                }
            });
        });
    }

    function displayResults(word, results) {
        if (results.length === 0) {
            content.innerHTML = `<div class="jp-error">No definition found for "${word}" on Jisho</div>`;
            return;
        }

        let html = '';
        results.forEach((result, index) => {
            html += `<div class="jp-word">${result.word}</div>`;
            if (result.reading && result.reading !== result.word) {
                html += `<div class="jp-reading">${result.reading}</div>`;
            }
            result.senses.forEach((sense, senseIndex) => {
                html += `<div class="jp-def">`;
                html += `<span class="jp-source">jisho</span>`;
                // Parts of speech
                if (sense.pos && sense.pos.length > 0) {
                    sense.pos.forEach(pos => {
                        html += `<span class="jp-pos">${pos}</span>`;
                    });
                }
                // Definitions
                html += `<div style="margin-top: 6px;">${sense.definitions.join('; ')}</div>`;
                // Tags
                if (sense.tags && sense.tags.length > 0) {
                    html += `<div class="jp-tags">`;
                    sense.tags.forEach(tag => {
                        html += `<span class="jp-tag">${tag}</span>`;
                    });
                    html += `</div>`;
                }
                html += `</div>`;
            });
        });
        content.innerHTML = html;
    }

    async function show(x, y, word) {
        content.innerHTML = '<div class="jp-loading">Searching...</div>';
        popup.style.display = 'block';
        position(x, y);
        isVisible = true;

        try {
            const results = await queryJisho(word);
            displayResults(word, results);
        } catch (error) {
            console.log('Dictionary query error:', error);
            displayResults(word, []);
        }
    }

    closeBtn.onclick = close;

    document.addEventListener('mousemove', e => {
        if (isVisible) return;
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            const word = getJapaneseText(e.target);
            if (word) show(e.clientX, e.clientY, word);
        }, 500);
    });

    document.addEventListener('dblclick', e => {
        const word = getJapaneseText(e.target);
        if (word) {
            close();
            setTimeout(() => show(e.clientX, e.clientY, word), 100);
        }
    });

    document.addEventListener('click', e => {
        if (!popup.contains(e.target)) close();
    });

    document.addEventListener('keydown', e => {
        if (e.ctrlKey && e.shiftKey && e.key === 'J') {
            e.preventDefault();
            const word = window.getSelection().toString().trim();
            if (word && japaneseRegex.test(word)) {
                isVisible ? close() : show(100, 100, word);
            }
        }
    });

    console.log('Online');
})();