Tampermonkey Button erstellen?

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, Webseite
03.09.2021, 04:59

Zunächst musst du ein Element im HTML-Dokument der Webseite kennen, an das du deinen Button hängen kannst. Dieses lässt sich mit verschiedenen Methoden aufspüren, bspw. einem CSS-Selektor.

Beispieldokument:

<!doctype html>
<title>Example</title>
<body>
  <main>
    <header>Some Header</header>
    <section class="introduction">
      <h1>Hello world!</h1>
      <p>Some introduction text ...</p>
    </section>
  </main>
</body>

Diesem Dokument soll nun im section-Element ein Button untergejubelt werden.

Das Nutzerskript dazu:

// ==UserScript==
// @name Add Button
// @description Add a button to section element. On click a message will be shown in some alert box.
// @namespace add_button_example
// @version 1.0
// @grant none
// ==/UserScript==

function addButton() {
  var targetContainer = document.querySelector(".introduction");

  if (!targetContainer) {
    console.log("TamperMonkey: Target container does not exist");
    return;
  }

  var button = document.createElement("button");
  button.innerText = "Click me!";
  button.setAttribute("type", "button");
  button.addEventListener("click", function(evt) {
    alert("Hello!");
  });

  targetContainer.appendChild(button);
}

addButton();

Wenn der Zielcontainer nicht gefunden werden kann, erfolgt eine Meldung in der Konsole.

Den Button habe ich hier zusätzlich mit einen Event Handler verbunden, der bei Klick ausgeführt wird. In diesem Beispiel öffnet er einen Dialog mit der Meldung Hello!.