Clickable Elements Highlighter

Highlights clickable elements on web pages.

2023/05/29のページです。最新版はこちら

スクリプトをインストールするには、Tampermonkey, GreasemonkeyViolentmonkey のような拡張機能のインストールが必要です。

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

スクリプトをインストールするには、TampermonkeyViolentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、TampermonkeyUserscripts のような拡張機能のインストールが必要です。

このスクリプトをインストールするには、Tampermonkeyなどの拡張機能をインストールする必要があります。

このスクリプトをインストールするには、ユーザースクリプト管理ツールの拡張機能をインストールする必要があります。

(ユーザースクリプト管理ツールは設定済みなのでインストール!)

このスタイルをインストールするには、Stylusなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus などの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus tなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

(ユーザースタイル管理ツールは設定済みなのでインストール!)

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください
// ==UserScript==
// @name         Clickable Elements Highlighter
// @namespace    http://your-namespace-here
// @version      1.0.2
// @description  Highlights clickable elements on web pages.
// @match        http*://*/*
// ==/UserScript==


(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";
  });

  document.addEventListener("click", function() {
    clickableElements.forEach(element => {
      element.style.border = "1px solid red";
    });
  });

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

  function markClickableElementsInOtherFiles() {
    const scriptTags = document.querySelectorAll('script[src]'); // 获取页面中所有的<script>标签

    scriptTags.forEach(script => {
      const file = script.getAttribute('src'); // 获取<script>标签的src属性值
      if (file.endsWith('.js')) { // 确保文件以.js结尾且不是主文件main.js
        fetch(file)
          .then(response => response.text())
          .then(code => {
            const dummyDiv = document.createElement('div');
            dummyDiv.innerHTML = code;
            const clickableElementsInFile = dummyDiv.querySelectorAll("a, button, input, select, textarea, [role=button], [role=link], [role=checkbox], [role=radio], [role=menuitem], [contenteditable=true],span");

            clickableElementsInFile.forEach(element => {
              element.style.border = "1px solid red";
            });
          })
          .catch(error => {
            console.error(`Error fetching or parsing ${file}:`, error);
          });
      }
    });
  }

})();