No button appears

[DumbBoy2]

After following every step no button seems to appear nowhere...

[RadianttK]

Hi @DumbBoy2, thanks for reaching out. Can you please share the following information to help with diagnosing the issue?

• Browser
• Userscript manager
• Operating system
• Steps to reproduce the problem

Can you please also try opening the console for your browser and refreshing the page and share any errors you see?

Thanks in advance.

---

For reference, this is where the button should appear once you have loaded the script and entered your Jimaku API key:

[DumbBoy2]

ok so basically I was just stupid and didn't realize where the button should have been. after spending a lot of time debugging it I saw it... In order to avoid anithing like that to happen to anyone else I suggest making the button more visible and moving it to the front. I already did it for you, you can have a look at it if you want, I used the same colors of the jimaku website tho I have to admit it probably looks better on light mode... can't upload a js file apparently so i'll just paste the code here... // ==UserScript== // @name AniList Jimaku Button // @namespace http://tampermonkey.net/ // @version 1.3 // @description Adds a button to individual anime pages on AniList that links to the corresponding Jimaku entry // @author https://github.com/RadianttK // @match https://anilist.co/anime/* // @icon https://www.google.com/s2/favicons?sz=64&domain=anilist.co // @grant GM.getValue // @grant GM.setValue // @run-at document-start // @downloadURL https://update.greasyfork.org/scripts/493476/AniList%20Jimaku%20Button.user.js // @updateURL https://update.greasyfork.org/scripts/493476/AniList%20Jimaku%20Button.meta.js // ==/UserScript==

(function() { 'use strict'; let currentPageUrl, anilistId, JIMAKU_API_KEY;

async function setupVariables() {
    currentPageUrl = window.location.href;
    const anilistIdRegexMatch = currentPageUrl.match(/^https:\/\/anilist\.co\/anime\/(\d+)(\/.*)?$/);
    anilistId = anilistIdRegexMatch ? anilistIdRegexMatch[1] : null;
    //console.log("Current URL:", currentPageUrl);
    //console.log("Anilist ID:", anilistId);
}

async function promptAPIKey() {
    const apiKey = prompt("Please enter your Jimaku API key:");
    if (apiKey !== null && apiKey !== "") {
        await GM.setValue("API_KEY_JIMAKU", apiKey);
    }
}

async function getAPIKey() {
    let apiKey = await GM.getValue("API_KEY_JIMAKU");
    if (!apiKey) {
        await promptAPIKey();
        apiKey = await getAPIKey();
    }
    return apiKey;
}

//DELETE API KEY IN ORDER TO REASK EVERYTIME TO DEBUG
//(async function() {
//await GM.deleteValue("API_KEY_JIMAKU");
//console.log("API key cancellata");
//})();

document.addEventListener('DOMContentLoaded', function() {
    //console.log("DOMContentLoaded event fired"); // Log
    const pageLoadObserver = new MutationObserver(async function() {
        //console.log("pageLoadObserver callback executed"); // Log
        const overviewButton = document.querySelector('.nav > a.router-link-exact-active');
        //console.log("overview button:", overviewButton); // Log per verificare se viene trovato
        if(!overviewButton) {
            //console.log("overview button not found, stopping execution.");
        return;
        }

        pageLoadObserver.disconnect();
        JIMAKU_API_KEY = await getAPIKey();
        await setupVariables();
        await addJimakuButton(overviewButton);
    });
    const pageNavigationObserver = new MutationObserver(async function() {
        //console.log("pageNavigationObserver callback executed"); // Log
        if (window.location.href === currentPageUrl) return;

        const jimakuButton = document.getElementById('jimaku-button');
        if (!jimakuButton) return;

        await setupVariables();
        await updateJimakuButton(jimakuButton);
    });

    const observerConfig = { childList: true, subtree: true };
    pageLoadObserver.observe(document.body, observerConfig);
    pageNavigationObserver.observe(document.body, observerConfig);
});

async function fetchJimakuId(anilistId) {
    const cachedJimakuId = await GM.getValue('jimakuId_' + anilistId);
    return cachedJimakuId ? cachedJimakuId : await fetchJimakuIdFromAPI(anilistId);
}

async function fetchJimakuIdFromAPI(anilistId) {
    //console.log("Fetching Jimaku ID for Anilist ID:", anilistId); // Log
    //console.log("Using API Key:", JIMAKU_API_KEY); // Log

    const response = await fetch(`https://jimaku.cc/api/entries/search?anilist_id=${anilistId}`, { headers: { 'authorization': JIMAKU_API_KEY } });
    const data = await response.json();

    //console.log("Response data:", data); // Log

    if (response.ok && data[0]) {
        const id = data[0].id;
        await GM.setValue('jimakuId_' + anilistId, id);
        return id;
    }
    if (!data[0]) {
        //console.log(`No jimaku entry found for anilist id: ${anilistId}`)
    }
    //console.error('Error fetching data from Jimaku API:', data.error);
    if (response.status === 401) {
        await GM.setValue("API_KEY_JIMAKU", null);
        //console.log("Invalid Jimaku API key supplied.")
        alert("Error: Invalid Jimaku API key.");
    }
    return "..";
}

async function addJimakuButton(overviewButton) {
    //console.log("Adding Jimaku button");
    const jimakuButton = createJimakuButton(overviewButton);
    jimakuButton.href = "https://jimaku.cc/";
    overviewButton.parentNode.insertBefore(jimakuButton, overviewButton);
    //console.log("Jimaku button added to the DOM");
    await updateJimakuButton(jimakuButton);
}

async function updateJimakuButton(jimakuButton) {
    try {
        const id = await fetchJimakuId(anilistId);
        jimakuButton.href = `https://jimaku.cc/entry/${id}`;
        //console.log("Jimaku button href updated:", jimakuButton.href);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

function createJimakuButton(overviewButton) {
    //console.log("Creating Jimaku button");
    const jimakuButton = document.createElement('a');
    jimakuButton.innerText = 'Jimaku';
    jimakuButton.setAttribute('id', 'jimaku-button');
    for (const { name, value } of overviewButton.attributes) {
        jimakuButton.setAttribute(name, value);
    }
    jimakuButton.style.display = 'inline-block';
jimakuButton.style.padding = '8px 12px';
jimakuButton.style.marginLeft = '10px';
jimakuButton.style.marginRight = '10px';
jimakuButton.style.backgroundColor = 'rgb(19, 47, 77)'; // Colore di sfondo
jimakuButton.style.color = 'rgb(196, 160, 88)'; // Colore del testo bianco per contrasto
jimakuButton.style.border = `2px solid rgb(19, 47, 77)`; // Colore del bordo
jimakuButton.style.borderRadius = '12px';
jimakuButton.style.fontSize = '14px';
jimakuButton.style.fontWeight = '600'; // Bolder text
jimakuButton.style.textDecoration = 'none';
jimakuButton.style.fontFamily = 'Arial, sans-serif';
jimakuButton.style.cursor = 'pointer';
jimakuButton.style.lineHeight = '2'; // Allinea il testo
jimakuButton.style.textShadow = '1px 1px 1px black'; // Slight shadow to make the text pop
jimakuButton.style.boxShadow = '0 0 10px rgb(19, 47, 77)'; // Glow effect around the button
jimakuButton.onmouseover = function() {
     jimakuButton.style.backgroundColor = '#163a6f'; // Scurisce leggermente il colore di sfondo al passaggio del mouse
    jimakuButton.style.borderColor = 'rgb(196, 160, 88)';
    jimakuButton.style.boxShadow = '0 0 20px 5px rgb(196, 160, 88)';
    jimakuButton.style.borderRadius = '12px'; // Ensure corners stay rounded on hover
};
jimakuButton.onmouseout = function() {
    jimakuButton.style.backgroundColor = 'rgb(19, 47, 77)'; // Ripristina il colore di sfondo originale
    jimakuButton.style.borderColor = 'rgb(19, 47, 77)';
    jimakuButton.style.boxShadow = '0 0 10px rgb(19, 47, 77)';
    jimakuButton.style.borderRadius = '12px'; // Ensure corners stay rounded on mouse out
};
    return jimakuButton;
}

})();

it should look like this with an extra hover feature:

[RadianttK]

Ah okay, I'm glad it's working!

Thanks for sharing your modified version as well. I like the styling you added.

I personally like it to blend in more with the website, but I agree that can make it hard to find at first. I will add an image to the README.md to make it easier for people in the future.

Thanks!

[RadianttK]

I like your suggestion of moving the button closer to the left as well.

I have implemented this in v1.4 😄