# Bookmarklets
They work on most pages (without SOP) ツ
https://talks.inselchaos.de/inselchaos-2025/talk/UEWFTN/
To contact me: https://chaos.social/@birdy1976
## Dark Mode

javascript: (() => {
  var e = document.querySelector("*").style;
  if (e.filter.includes("invert(100%)")) {
    e.filter = "invert(0%)";
  } else {
    e.filter = "invert(100%)";
  }
})();

## Edit Page (Toggle)

javascript: (() => {
  document.body.contentEditable = !(document.body.contentEditable === `true`);
})();

## Game Of Thrones Quotes API

javascript: (() => {
  fetch("https://api.gameofthronesquotes.xyz/v1/random")
    .then((r) => r.json())
    .then((d) => console.log(d.sentence + " ~" + d.character.name));
})();

## KI-Anfrage (Gemini) mit Google Suche
You'll need a (personal) API key!
https://ai.google.dev/gemini-api/docs/api-key?hl=de

javascript: (function () {
  const API_KEY = "###TOP#SECRET###";
  const MODEL_NAME = "gemini-2.0-flash";
  async function callGemini(promptText) {
    try {
      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${MODEL_NAME}:generateContent?key=${API_KEY}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ contents: [{ parts: [{ text: promptText }] }], /* Hier wird das Grounding mit Google Search aktiviert */ tools: [{ googleSearch: {} }] }),
      });
      if (!response.ok) {
        const errorData = await response.json();
        console.error("Gemini API Fehler:", errorData);
        return `Fehler: ${errorData.error.message || "Unbekannter API-Fehler"}`;
      }
      const data = await response.json();
      if (data.candidates && data.candidates[0] && data.candidates[0].content && data.candidates[0].content.parts && data.candidates[0].content.parts[0]) {
        return data.candidates[0].content.parts[0].text;
      } else {
        console.warn("Unerwartete API-Antwort-Struktur:", data);
        return "Keine lesbare Antwort von Gemini erhalten.";
      }
    } catch (error) {
      console.error("Netzwerk- oder anderer Fehler beim Gemini-Aufruf:", error);
      return `Ein Problem ist aufgetreten: ${error.message}`;
    }
  }
  const userPrompt = prompt('Gib einen Text für Gemini ein (z.B. "Wie ist das aktuelle Wetter in Zürich?" oder "Was ist die Hauptstadt von Frankreich?"):');
  if (userPrompt) {
    callGemini(userPrompt).then((result) => {
      alert("Antwort von Gemini:\n\n" + result);
    });
  } else {
    alert("Kein Text eingegeben. Das Bookmarklet wurde abgebrochen.");
  }
})();

## Selfie (Webcam)

javascript: (function () {
  if (document.getElementById("webcamSelfieContainer")) {
    document.getElementById("webcamSelfieContainer").remove();
    return;
  }
  var container = document.createElement("div");
  container.id = "webcamSelfieContainer";
  container.style.position = "fixed";
  container.style.top = "10px";
  container.style.right = "10px";
  container.style.background = "white";
  container.style.border = "2px solid black";
  container.style.padding = "10px";
  container.style.zIndex = 99999;
  container.style.textAlign = "center";
  container.style.width = "320px";
  var video = document.createElement("video");
  video.style.width = "300px";
  video.autoplay = true;
  var canvas = document.createElement("canvas");
  canvas.style.display = "none";
  canvas.width = 300;
  canvas.height = 225;
  var btnCapture = document.createElement("button");
  btnCapture.textContent = "Foto machen";
  var img = document.createElement("img");
  img.style.marginTop = "10px";
  img.style.width = "300px";
  img.style.display = "none";
  var btnClose = document.createElement("button");
  btnClose.textContent = "Schlie%C3%9Fen";
  btnClose.style.marginLeft = "10px";
  btnCapture.onclick = function () {
    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
    img.src = canvas.toDataURL("image/png");
    img.style.display = "block";
  };
  btnClose.onclick = function () {
    stream.getTracks().forEach((track) => track.stop());
    container.remove();
  };
  container.appendChild(video);
  container.appendChild(document.createElement("br"));
  container.appendChild(btnCapture);
  container.appendChild(btnClose);
  container.appendChild(img);
  document.body.appendChild(container);
  var stream;
  navigator.mediaDevices
    .getUserMedia({ video: true })
    .then((s) => {
      stream = s;
      video.srcObject = stream;
    })
    .catch((e) => {
      alert("Zugriff auf die Webcam verweigert oder nicht verf%C3%BCgbar.");
      container.remove();
    });
})();

## TableThis
https://www.shareprogress.org/bookmarklet/htmltabletest/

javascript: (function () {
  var scriptURL = "//scripts.shpg.org/TableThis.js";
  if (window.jQuery) {
    loadScript();
  } else {
    var jq = document.createElement("script");
    jq.type = "text/javascript";
    jq.onload = function () {
      loadScript();
    };
    jq.src = "//code.jquery.com/jquery-2.1.3.js";
    document.getElementsByTagName("head")[0].appendChild(jq);
  }
  function loadScript() {
    var A = document.createElement("script");
    A.type = "text/javascript";
    A.onload = function () {};
    A.src = scriptURL;
    document.getElementsByTagName("head")[0].appendChild(A);
  }
})();

## Tippen (Eingabefeld)
Choose an input filed and start the bookmarklet.

javascript: (function () {
  function simulateTyping(element, text, delay = 100, index = 0) {
    if (index < text.length) {
      let char = text.charAt(index);
      ["keydown", "keypress"].forEach((eventType) => {
        element.dispatchEvent(new KeyboardEvent(eventType, { key: char, char: char, code: "Key" + char.toUpperCase(), bubbles: true, cancelable: true }));
      });
      element.value += char;
      ["input", "keyup"].forEach((eventType) => {
        element.dispatchEvent(new Event(eventType, { bubbles: true }));
      });
      setTimeout(() => simulateTyping(element, text, delay, index + 1), delay);
    }
  }
  let text = prompt("Text zum Tippen eingeben:");
  if (!text) {
    alert("Kein Text eingegeben.");
    return;
  }
  let active = document.activeElement;
  if (active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.isContentEditable)) {
    active.focus();
    simulateTyping(active, text);
  } else {
    alert("Bitte fokussiere zuerst ein Eingabe- oder Textfeld!");
  }
})();

## Vollbild (Fullscreen)
* Click on any element on a webpage to zoom it
* Auto-zoom on https://webformatter.com/javascript

javascript: (function () {
  let selectedElement = null;
  let colorInput = null;
  let originalBackgroundColor = "";
  /* Variable zum Speichern der Originalfarbe */ /* Entfernt den Farbpicker vom DOM */ function removeColorInput() {
    if (colorInput) {
      colorInput.remove();
      colorInput = null;
    }
  }
  /* Konvertiert RGB(A)-Farben in Hexadezimalformat (ignoriert Alpha). Bei Transparenz wird die Standardfarbe #000000 (Schwarz) zurückgegeben. */ function rgbToHex(rgb) {
    if (!rgb || rgb.startsWith("rgba(0, 0, 0, 0)") || rgb === "transparent") {
      return "#000000"; /* Standardfarbe Schwarz bei transparentem Hintergrund */
    }
    const result = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
    if (!result) return "#000000";
    /* Fallback auf Schwarz, falls keine Farbe erkannt wird */ const [r, g, b] = result.slice(1).map(Number);
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).padStart(6, "0");
  }
  /* Wird aufgerufen, wenn sich der Vollbildmodus ändert */ function onFullscreenChange() {
    if (document.fullscreenElement) {
      const fsElem = document.fullscreenElement;
      /* Speichert die Originalfarbe, bevor der Farbpicker erstellt wird */ originalBackgroundColor = window.getComputedStyle(fsElem).backgroundColor;
      /* Erstellt den Farbpicker, falls er noch nicht existiert */ if (!colorInput) {
        colorInput = document.createElement("input");
        colorInput.type = "color";
        colorInput.value = rgbToHex(originalBackgroundColor);
        /* Setzt den Initialwert auf die Originalfarbe (oder Schwarz bei Transparent) */ /* Styling für den Farbpicker */ Object.assign(colorInput.style, {
          position: "absolute",
          top: "10px",
          right: "10px",
          zIndex: 2147483647,
          width: "40px",
          height: "40px",
          border: "none",
          padding: "0",
          cursor: "pointer",
          backgroundColor: "transparent",
        });
        /* Fügt den Farbpicker direkt zum Vollbildelement hinzu */ fsElem.appendChild(colorInput);
        /* Event-Listener für Farbänderungen */ colorInput.addEventListener("input", () => {
          fsElem.style.backgroundColor = colorInput.value;
        });
      }
    } else {
      /* Wenn der Vollbildmodus verlassen wird: */ /* 1. Farbpicker entfernen */ removeColorInput();
      /* 2. Originalfarbe wiederherstellen, falls ein Element ausgewählt war */ if (selectedElement && originalBackgroundColor) {
        selectedElement.style.backgroundColor = originalBackgroundColor;
        originalBackgroundColor = ""; /* Zurücksetzen für die nächste Verwendung */
      }
    }
  }
  /* Behandelt Mouseover-Events zur Hervorhebung von Elementen */ function mouseOverHandler(e) {
    if (selectedElement && selectedElement !== e.target) {
      selectedElement.style.outline = "";
    }
    e.target.style.outline = "7px dotted red";
    selectedElement = e.target;
  }
  /* Behandelt Klick-Events zum Aktivieren des Vollbildmodus */ async function clickHandler(e) {
    e.preventDefault();
    e.stopPropagation();
    if (selectedElement) {
      /* Speichert die Originalfarbe des ausgewählten Elements, bevor in den Vollbildmodus gewechselt wird */ originalBackgroundColor = window.getComputedStyle(selectedElement).backgroundColor;
      /* Fordert den Vollbildmodus an */ try {
        await selectedElement.requestFullscreen();
        selectedElement.style.outline = "";
        document.removeEventListener("mouseover", mouseOverHandler, true);
        document.removeEventListener("click", clickHandler, true);
      } catch (error) {}
    }
  }
  /* Registriert Event-Listener */ document.addEventListener("fullscreenchange", onFullscreenChange);
  document.addEventListener("mouseover", mouseOverHandler, true);
  document.addEventListener("click", clickHandler, true);
  /* Spezialfall: Editor automatisch in Fullscreen */ if (document.location.href.includes(`https://webformatter.com/`)) {
    const codeMirrorElement = document.querySelector(".CodeMirror");
    if (codeMirrorElement) {
      selectedElement = codeMirrorElement;
      const clickEvent = new Event("click", { bubbles: true, cancelable: true });
      selectedElement.dispatchEvent(clickEvent);
    } else {
      console.warn("CodeMirror element not found on webformatter.com.");
    }
  }
})();

## Würfel (Widget)
A dice on every webpage ツ

javascript: (() => {
  if (document.getElementById("dice-widget-bookmarklet")) return;
  let s = parseInt(prompt("Wieviele Seiten soll der Würfel haben?", "6"), 10);
  if (isNaN(s) || s < 1) s = 6;
  const p = (n) => n.toString().padStart(s.toString().length, "0"),
    r = () => Math.floor(Math.random() * s) + 1,
    t = document.createElement("style");
  t.id = "dice-widget-style-bookmarklet";
  t.textContent =
    "#dice-widget-bookmarklet{position:fixed;top:20px;left:20px;z-index:999999;background:#2c001e;color:#fff;font-family:sans-serif;box-shadow:0 4px 8px rgba(0,0,0,0.3);border-radius:8px;overflow:hidden;width:120px;animation:fadeIn 0.3s ease;}#dice-widget-header{background:#77216f;padding:6px 10px;cursor:move;font-weight:bold;display:flex;justify-content:space-between;align-items:center;}#dice-widget-header button{background:transparent;border:none;color:#fff;font-size:16px;cursor:pointer;}#dice-display{font-size:32px;text-align:center;padding:20px;user-select:none;transition:transform 0.3s ease;}#dice-widget-bookmarklet:hover #dice-display{transform:scale(1.05);}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}";
  document.head.appendChild(t);
  const w = document.createElement("div");
  w.id = "dice-widget-bookmarklet";
  w.innerHTML = '<div id="dice-widget-header"><span>🎲 Würfel</span><button id="dice-close">×</button></div><div id="dice-display">' + p(r()) + "</div>";
  document.body.appendChild(w);
  const h = w.querySelector("#dice-widget-header");
  let x,
    y,
    d = !1;
  h.addEventListener("mousedown", (e) => {
    (d = !0), (x = e.clientX - w.offsetLeft), (y = e.clientY - w.offsetTop), e.preventDefault();
  }),
    document.addEventListener("mousemove", (e) => {
      if (!d) return;
      let l = e.clientX - x,
        a = e.clientY - y;
      (l = Math.max(0, Math.min(window.innerWidth - w.offsetWidth, l))), (a = Math.max(0, Math.min(window.innerHeight - w.offsetHeight, a))), (w.style.left = l + "px"), (w.style.top = a + "px");
    }),
    document.addEventListener("mouseup", () => (d = !1));
  const i = w.querySelector("#dice-display");
  i.addEventListener("click", () => {
    (i.style.transform = "rotateY(360deg)"),
      setTimeout(() => {
        (i.textContent = p(r())), (i.style.transform = "none");
      }, 300);
  });
  const k = (e) => "Escape" === e.key && b();
  document.addEventListener("keydown", k);
  const b = () => {
    w.remove(), t.remove(), document.removeEventListener("keydown", k);
  };
  w.querySelector("#dice-close").addEventListener("click", b);
})();