Odkąd napisałem skryptozakładki do Facebooka oraz ING, nie mogę przestać o nich myśleć. To, że ułatwiają mi życie, to jedno - ale teraz okazuje się, że one dają dużo większe możliwości, niż mi się na początku wydawało.

Mam taki pomysł, żeby napisać sobie szkielet skryptozakładki, która dodaje do treści strony swobodnie latające okienko. Takie okienko będzie można przesuwać w dowolne miejsce na stronie. Będzie też przycisk "Zamknij", który usunie okienko całkowicie. Pozostała część okienka będzie do dyspozycji właściwej funkcji. Dzięki temu będzie można rozszerzyć dosłownie każdą jedną stronę internetową o dosłownie każdy mechanizm, jaki się tylko zamarzy, i to jednym kliknięciem zakładki.

Do pracy nad pomysłem użyję kodu skryptozakładki Facebookowej z poprzedniego wpisu, bo wiem jak działa, a dzięki temu mechanizmowi może uda mi się poprawić jej użyteczność.

Jak to działa

• poniższy kod wklejasz na stronę https://www.minifier.org/ i minimalizujesz
• w przeglądarce tworzysz nową zakładkę, nazywasz ją jak chcesz, a w pole "adres" wklejasz zminimalizowany kod
• wchodzisz na fejsa na dowolny post z miliardem komentarzy, i potem odpalasz zakładkę
• profit

javascript: (function () {
  const PANEL_ID = "fb-control-panel";
  const BUTTON_TEXT_PATTERNS = [
    /Wyświetl wszystkie.*odpowiedzi/,
    /Wyświetl więcej/,
    /Pokaż więcej odpowiedzi/,
    /Wyświetl 1 odpowiedź/,
  ];

  // Check if panel already exists - if so, do nothing
  if (document.getElementById(PANEL_ID)) return;

  // Create and setup UI
  const panel = createPanel();
  const title = createTitle();
  const toggleButton = createToggleButton();
  const closeButton = createCloseButton();
  panel.append(title, toggleButton, closeButton);
  document.body.appendChild(panel);

  // State
  let buttonWatcher = null;
  let offsetX = 0;
  let offsetY = 0;
  let isDragging = false;

  // Event listeners
  toggleButton.addEventListener("click", handleToggleClick);
  closeButton.addEventListener("click", handleCloseClick);
  title.addEventListener("mousedown", handleMouseDown);
  document.addEventListener("mousemove", handleMouseMove);
  document.addEventListener("mouseup", handleMouseUp);

  // === EVENT HANDLERS ===
  function handleToggleClick() {
    buttonWatcher ? stopAutoClicker() : startAutoClicker();
  }

  function handleCloseClick() {
    stopAutoClicker();
    document.removeEventListener("mousemove", handleMouseMove);
    document.removeEventListener("mouseup", handleMouseUp);
    panel.remove();
  }

  function handleMouseDown(event) {
    isDragging = true;
    offsetX = event.clientX - panel.offsetLeft;
    offsetY = event.clientY - panel.offsetTop;
  }

  function handleMouseMove(event) {
    if (isDragging) {
      panel.style.left = `${event.clientX - offsetX}px`;
      panel.style.top = `${event.clientY - offsetY}px`;
    }
  }

  function handleMouseUp() {
    isDragging = false;
  }

  // === AUTO-CLICKER FUNCTIONS ===
  function startAutoClicker() {
    updateButton("Stop Auto-Clicker", "crimson");

    // Click existing buttons
    clickButtonsInNode(document.body);

    // Watch for new buttons
    buttonWatcher = new MutationObserver((mutations) => {
      if (buttonWatcher) {
        mutations.forEach((mutation) =>
          mutation.addedNodes.forEach(clickButtonsInNode)
        );
      }
    });
    buttonWatcher.observe(document.body, { childList: true, subtree: true });
  }

  function clickButtonsInNode(node) {
    Array.from(node.querySelectorAll('div[role="button"]'))
      .filter((button) =>
        BUTTON_TEXT_PATTERNS.some((pattern) => pattern.test(button.textContent))
      )
      .forEach((button, index) => {
        safeClickWithDelay(button, index * 200);
      });
  }

  function stopAutoClicker() {
    updateButton("Start Auto-Clicker", "forestgreen");
    if (buttonWatcher) {
      buttonWatcher.disconnect();
      buttonWatcher = null;
    }
  }

  function updateButton(text, color) {
    toggleButton.textContent = text;
    toggleButton.style.backgroundColor = color;
  }

  function safeClickWithDelay(button, delay) {
    setTimeout(() => {
      try {
        button.click();
      } catch (error) {
        console.error("Failed to click button:", error);
      }
    }, delay);
  }

  // === UI CREATION ===
  function createPanel() {
    const panel = document.createElement("div");
    Object.assign(panel.style, {
      position: "fixed",
      top: "100px",
      left: "100px",
      background: "#fff",
      border: "2px solid #000",
      padding: "15px",
      zIndex: "999999",
      display: "grid",
      gap: "10px",
    });
    panel.id = PANEL_ID;
    return panel;
  }

  function createTitle() {
    const title = document.createElement("h1");
    title.textContent = "Facebook Auto-Clicker";
    Object.assign(title.style, {
      cursor: "move",
      userSelect: "none",
      margin: "0",
    });
    return title;
  }

  function createToggleButton() {
    const button = document.createElement("button");
    button.textContent = "Start Auto-Clicker";
    button.style.cursor = "pointer";
    button.id = "fb-toggle-btn";
    return button;
  }

  function createCloseButton() {
    const button = document.createElement("button");
    button.textContent = "Close";
    button.style.cursor = "pointer";
    button.id = "fb-close-btn";
    return button;
  }
})();

Muzyczka do programowania