Clickable Elements Highlighter

Highlights clickable elements on web pages.

Versão de: 26/01/2024. Veja: a última versão.

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

You will need to install an extension such as Tampermonkey to install this script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

// ==UserScript==
// @name         Clickable Elements Highlighter
// @namespace    http://your-namespace-here
// @version      1.0.5
// @description  Highlights clickable elements on web pages.
// @match        http*://*/*
// ==/UserScript==


// main.js

(function() {
  const clickableElements = document.querySelectorAll("a, button, input, select, textarea, [role=button], [role=link], [role=checkbox], [role=radio], [role=menuitem], [contenteditable=true]");

  clickableElements.forEach(element => {
    element.addEventListener("click", function(event) {
      this.style.border = "";
      event.stopPropagation();
    });
    element.addEventListener("mousedown", function(event) {
      if (event.which === 2) {
        this.style.border = "";
        event.stopPropagation();
      }
    });
    element.style.border = "1px solid red";
  });

  // Call function to mark clickable elements in other JavaScript files
  markClickableElementsInOtherFiles();

  // Toggle button for turning on/off the effect
  const toggleButton = document.createElement("button");
  toggleButton.textContent = "关闭效果";
  toggleButton.style.position = "fixed";
  toggleButton.style.top = "10px";
  toggleButton.style.right = "10px";
  toggleButton.style.padding = "10px";
  toggleButton.style.background = "white";
  toggleButton.style.border = "1px solid black";
  toggleButton.style.zIndex = "9999";

  let effectEnabled = true;

  toggleButton.addEventListener("click", function() {
    effectEnabled = !effectEnabled;

    if (effectEnabled) {
      toggleButton.textContent = "关闭效果";
      clickableElements.forEach(element => {
        element.style.border = "1px solid red";
      });
      markClickableElementsInOtherFiles();
    } else {
      toggleButton.textContent = "开启效果";
      clickableElements.forEach(element => {
        element.style.border = "";
      });
    }
  });

  document.body.appendChild(toggleButton);

function markElementsWithEvents() {
  const allElements = document.querySelectorAll('*');
  allElements.forEach(element => {
    for (let key in element) {
      if (key && key.startsWith("on") && typeof element[key] === "function") {
        element.style.border = "1px solid red";
        //break;// 如果发现任何事件,就停止搜索其他事件
      }
    }
  });
}

})();