e621.net JSON Button #

Adds a new button next to the download button on e621.net and e6ai.net websites, allowing users to easily access the JSON data of a post. When clicked, the button directs the user to a URL constructed by appending “.json” to the post’s URL. The script dynamically inserts the button into the page, either after the download button or as a new list item in the post options menu, depending on the page layout.

// ==UserScript==
// @name e621.net JSON Button
// @namespace https://cringe.live
// @version 1.0
// @description Adds a JSON button next to the download button on e621.net
// @author _ka_de
// @match https://e621.net/*
// @match https://e6ai.net/*
// @grant none
// ==/UserScript==

(function () {
  "use strict";

  function constructJSONUrl() {
    // Get the current URL
    var currentUrl = window.location.href;
    // Extract the post ID from the URL
    var postId = currentUrl.match(
      /^https?:\/\/(?:e621\.net|e6ai\.net)\/posts\/(\d+)/,
    )[1];
    // Check the hostname
    var hostname = window.location.hostname;
    // Construct the JSON URL based on the hostname
    var jsonUrl = "https://" + hostname + "/posts/" + postId + ".json";
    return jsonUrl;
  }

  function createJSONButton() {
    // Create a new button element
    var jsonButton = document.createElement("a");
    // Set the attributes for the button
    jsonButton.setAttribute("class", "button btn-info");
    var jsonUrl = constructJSONUrl();
    // Set the JSON URL as the button's href attribute
    jsonButton.setAttribute("href", jsonUrl);
    // Set the inner HTML for the button
    jsonButton.innerHTML =
      '<i class="fa-solid fa-angle-double-right"></i><span>JSON</span>';

    // Find the container where we want to insert the button
    var container = document.querySelector("#post-options > li:last-child");

    // Check if the #image-extra-controls element exists
    if (document.getElementById("image-extra-controls")) {
      // Insert the button after the download button
      container = document.getElementById("image-download-link");
      container.insertBefore(jsonButton, container.children[0].nextSibling);
    } else {
      // Insert the button after the last li element in #post-options
      container.parentNode.insertBefore(jsonButton, container.nextSibling);
    }
  }

  // Run the function to create the JSON button
  createJSONButton();
})();