Clickable Elements Highlighter

Highlights clickable elements on web pages.
2024-01-26 या दिनांकाला. सर्वात नवीन आवृत्ती पाहा.
Ask a question, post a review, or report the script.
Wrap lines
// ==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;// 如果发现任何事件，就停止搜索其他事件
      }
    }
  });
}

})();